The pseudo-class structural introduces the :nth-child() and :nth-last-child() selector which is similar to the :nth-child() in CSS3. The difference is that this selector will match the given selector list composed of their inclusive siblings.
# Syntax
Copy
:nth-child(An+B [of S]?) {
/* declarations */
}
:nth-last-child(An+B [of S]?) {
/* declarations */
}
# Example
Copy
li:nth-child(even of :not([hidden])) {
background-color: yellow;
}
Every even list element should have a yellow background color even though some elements are hidden in between. The last li should have a green background color.
# Browser support
Platform
Chrome
Firefox
Safari
Edge
Internet Explorer
Opera
Desktop
Yes (111)
Yes (113)
Yes (9)
Yes (111)
No
Yes (98)
Mobile
Yes (111)
Yes (113)
Yes (9)
Yes (111)
No
Yes (75)
For future browser support information, also check out caniuse.com (Structural pseudo-class).
# Usage statistics (Alexa Top 1,250,000 sites)
Due to an extreme price increase of our statistics provider the data collection was stopped in September 2018.
Please wait a moment, the comments start loading now...