-
Notifications
You must be signed in to change notification settings - Fork 23.1k
Description
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
- Folder:
en-us/web/css/_colon_nth-of-type - MDN URL: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type
- GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/css/_colon_nth-of-type/index.html
- Last commit: c67e2ef
- Document last modified: 2021-02-09T12:35:57.000Z