How do :nth-child() and :nth-of-type() differ?

Q: How do :nth-child() and :nth-of-type() differ?

Both `:nth-child()` and `:nth-of-type()` are CSS pseudo-classes used to target elements based on their position, but they differ in what elements they count. `:nth-child(n)` – Selects the element that is the nth child of its parent, counting all element types. `:nth-of-type(n)` – Selects the nth element of its specific type (tag) among its siblings, ignoring other types. ul li:nth-child(2) { color: red; /* Second child regardless of type */ } ul li:nth-of-type(2) { font-weight: bold; /* Second li of its type */ } Item 1 Paragraph Item 2 Item 3 In this example, `:nth-child(2)` selects the paragraph because it is the second child of the ` `, whereas `:nth-of-type(2)` selects 'Item 2' because it is the second ` ` among its siblings. Use `:nth-child()` when you want to target elements by their exact position among all children. Use `:nth-of-type()` when you want to target elements by their position among siblings of the same type. Combine these pseudo-classes with other selectors for precise targeting. Be cautious in complex HTML structures with mixed element types.

Difficulty: 3/10

CSS selectors, nth-child, nth-of-type

Understanding :nth-child() vs :nth-of-type() in CSS

Both :nth-child() and :nth-of-type() are CSS pseudo-classes used to target elements based on their position, but they differ in what elements they count.

Differences

1
:nth-child(n) – Selects the element that is the nth child of its parent, counting all element types.
2
:nth-of-type(n) – Selects the nth element of its specific type (tag) among its siblings, ignoring other types.

Example: :nth-child() vs :nth-of-type()

In this example, :nth-child(2) selects the paragraph because it is the second child of the <ul>, whereas :nth-of-type(2) selects 'Item 2' because it is the second <li> among its siblings.

Best Practices

1
Use :nth-child() when you want to target elements by their exact position among all children.
2
Use :nth-of-type() when you want to target elements by their position among siblings of the same type.
3
Combine these pseudo-classes with other selectors for precise targeting.
4
Be cautious in complex HTML structures with mixed element types.

Scenario Questions

0-2 years experience

Follow-up Questions