Yogesh Chauhan's Blog

Few more :nth-child examples in CSS

in CSS on October 17, 2020

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


Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
What are Conditional Tags in WordPress?WordPressHow to define variables in SCSS (Sass)?SCSSSolution to “Call to undefined function mysql_error()” in RevSlider WordPress PluginWordPressA Quick Comparison of JOIN and Subquery in SQLSQL/MySQLURL paths in DrupalDrupalHow to vertically and horizontally align text and image block (without flex or grid) in CSS?CSS