Few more :nth-child examples in CSS

Similar post: How To Apply Style To A Specific Child Element Using CSS?

Let's look at few more examples and break it down.

We know that :nth-child() matches elements based on their position in a group of siblings.

For e.g. this will select the second li element in a list

li:nth-child(2) { 
  color: lime;
}

But this one will select every fourth element among any group of siblings

:nth-child(4n) {
  color: lime;
}

If we specify, html tag then that will limit itself to that group only. 

For e.g. the if we add li in the example above then it will be applied to li elements only.

li:nth-child(4n) {
  color: lime;
}

The notation is an + b 

Where a is an integer step size, b is an integer offset, and n is all positive integers, starting from 0.

This one will select every odd element

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

OR

li:nth-child(2n+1) {
    background: green;
}

This one will select every even element

li:nth-child(even) {
    background: green;
}

OR

li:nth-child(2n+0) {
    background: green;
}

li:nth-child(2n) { 
    background: green; 
}

If you add a single digit in that equation then it will just select that element and apply the style.

// 2nd child

li:nth-child(2) {
  background: red;
}

// 4th child

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

If we add any digit with n, then it will apply the style to that digit multiplied by n and skipping the rest.

For e.g. this will apply style to every 5th li element.

li:nth-child(5n) {
  background: red;
}

To skip a number of elements from the start all we need to do is add (n + ( no. of elements to skip +1 ) )

This will skip first 2 elements and apply style from the 3rd one to all rest of the elements.

So, it represents the 3rd and all following elements: 3 [=0+3], 4 [=1+3], 5 [=2+3], etc.

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

If we multiply the n with some number in the example above, it will skip that number of elements.

For e.g. this will skip 3 elements starting from 4. So, it will apply style to elements 4 [=(3×0)+4], 7 [=(3×1)+4], 10 [=(3×2)+4], 13 [=(3×3)+4], etc.

li:nth-child(3n+4) {
  background: red;
}

If we multiply n with 0 then it will select the specific element that comes after plus sign.

So, in the example above, if we multiply n with 0, then it will become (0n + 4) and the style will be applied to the 4th li element.

li:nth-child(0n+4) {
  background: red;
}

We can use -n in the equation as well. 

To apply style to first 4 elements use this:

li:nth-child(-n+4) {
  background: red;
}

Change the number in above example to select your desired elements.

We can also select specific number of elements in between.

For e.g. this will apply style to all li elements from starting from position 3 to 10 in the group.

li:nth-child(n+3):nth-child(-n+10)
 {
  background: red;
}

Credit: MDN Docs

Share this post