Andrew's Digital Garden

nth-child 'of S' syntax

You can use the of S syntax in the :nth-child() pseudo-class to filter elements before the arguments in :nth-child() apply.

<ol> <li>Element 1</li> <li hidden>Element 2</li> <li>Element 3</li> <li>Element 4</li> <li hidden>Element 5</li> <li>Element 6</li> </ol>
/* This highlights Element 4 and Element 6 */ li:nth-child(even) { background-color: aqua; } /* This highlights Element 3 and Element 6 */ li:nth-child(even of :not([hidden])) { background-color: aqua; }

https://www.matuzo.at/blog/2024/100daysof-day108

[[css]]

nth-child 'of S' syntax