Skip to content

Issue with ":nth-of-type()": cannot be used with an arbitrary selector #2446

@xpe

Description

@xpe

MDN URL: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type

What information was incorrect, unhelpful, or incomplete?

The page does not clarify that nth-of-type cannot be used with an arbitrary selector. This is an easy mistake to make.

Read more at https://stackoverflow.com/questions/5545649/can-i-combine-nth-child-or-nth-of-type-with-an-arbitrary-selector

This is a very common problem that arises due to a misunderstanding of how :nth-child() and :nth-of-type() work. Unfortunately, there is currently no selector-based solution as yet because Selectors does not provide a way to match the nth child that matches an arbitrary selector...

The :nth-child() pseudo-class counts elements among all of their siblings under the same parent. It does not count only the siblings that match the rest of the selector. Similarly, the :nth-of-type() pseudo-class counts siblings sharing the same element type, which refers to the tag name in HTML, and not the rest of the selector.

Specific section or headline?

My recommendation is to add a section that makes the clarification above.

Also, in my opinion, the following example is misleading:

/* This has no effect, as the .fancy class is only on the 4th p element, not the 1st */
p.fancy:nth-of-type(1) {
  text-decoration: underline;
}

This suggests that nth-of-type can be used on an arbitrary selector. My understanding is that this is not correct.

What did you expect to see?

At least one example showing that, e.g. p.fancy:nth-of-type(...) is equivalent to p:nth-of-type(...).

Did you test this? If so, how?

Yes, I ran into this issue on a website I'm building.

MDN Content page report details

Metadata

Metadata

Assignees

No one assigned

    Labels

    Content:CSSCascading Style Sheets docs

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions