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

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.

Try example in CodePen

Browser support

Platform Chrome Firefox Safari Edge Internet Explorer Opera
Desktop No No No No No No
Mobile No No No No No No

Usage statistics (Alexa Top 500,000 sites)


Please wait a moment, the comments start loading now...
explorermozillachromesafariopera