CSS Selector Level 4 » Structural pseudo-class

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

:nth-child(An+B [of S]?) {
    /* declarations */

:nth-last-child(An+B [of S]?) {
    /* declarations */

# Example

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.

Try example in CodePen

# Browser support

Platform Chrome Firefox Safari Edge Internet Explorer Opera
Desktop No No Yes (9) No No No
Mobile No No Yes (9) No No No

# 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...
explorermozillachromesafariopera info external