2024 Guide to CSS nth-child: Target Any Element Like a Ninja! (Examples Included)

In this example, the nth-child(4) is specifically target the 4th item of the <li> element.

CSS Syntax:

li:nth-child(4) {
    background: yellowgreen;
}

Result:

In this example, we use nth-child(even) to target all of the even rows and assign the background color “lightyellow”. We also use nth-child(odd) to target the odd rows and assign “aqua” to the background color.

CSS Syntax:

li:nth-child(even) {
    background: lightyellow;
}
li:nth-child(odd){
    background: aqua;
}

Result:

CSS Syntax:

li:nth-child(3n + 1){
    background: pink;
}

Result:

CSS Syntax:

li:nth-child(-n + 2 of .example3){
    background:orange;
}

Result:

Example HTML:

<ul>
   <li class="skip" style="display: none;">Item 1.</li>
   <li>Item 2.</li>
   <li>Item 3.</li>
   <li>Item 4.</li>
   <li class="skip" style="display: none;">Item 5.</li>
   <li>Item 6.</li>
   <li>Item 7.</li>
   <li>Item 8.</li>
</ul>

CSS:

li:nth-child(odd){
    background:yellowgreen;
}

Problem

In below example, only li:nth-child(odd) is used. However, when some rows are hidden, such as in this example, where the 1st and 5th rows have been hidden and still counted as odd; although technically they are, but visually they are not. Hence, you will notice some UI discrepancies, as shown in the example below.

Solution

However, using the “of” selector and the “:not(.skip)” pseudo-class, we can target only the <li> elements that are not hidden.

CSS:

li:nth-child(odd of :not(.skip)){
    background:yellowgreen;
}

Result: