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 How to add Read More Read Less Button using JavaScript? #3 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #4 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #5 How to uninstall Cocoapods from the Mac OS? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface
You might also like these
RBV Framework and closing of big brandsMiscellaneousHow to check if the page is the home page in WordPress?WordPressA Step by Step Guide to Make RSS in XML For Any Website or Blog For FreeMiscellaneousThe simple difference between var, let and const in JavascriptJavaScriptWhat are components in Angular?AngularSolution for the error Commit failed – exit code 1 received in Desktop GithubMiscellaneous