YogeshChauhan.com
Few more :nth-child examples in CSS
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

dreamhost

Leave a Reply

Most Read

#1 How to set opacity or transparency using CSS? #2 Pagination in CSS with multiple examples #3 How to check if radio button is checked or not using JavaScript? #4 How to make HTML form interactive and using CSS? #5 How to uninstall Cocoapods from the Mac OS? #6 How to add Read More Read Less Button using JavaScript?



Recently Posted

Feb 24 How to modify the latest post array using get_posts() in WordPress? Feb 22 WordPress: How to get ACF field values from another post? Feb 22 WordPress: How to print ACF repeater field values? Feb 22 WordPress: How to print ACF array field values? Feb 21 WordPress: How to get field values in Advanced Custom Fields? Feb 21 WordPress: How to add a Search Icon in Menus with toggle effect using jQuery?



You might also like these

The Differences Between HAVING Clause and WHERE Clause in SQLSQL/MySQLThe 7 Security Objectives of Any Organization for IT and Network SecurityMiscHow to apply style to a specific child element using CSS?CSSFunction Scope in JavaScript for BeginnersJavaScript3 Types of Arrays in PHPPHPHow to create two segues with two UIButtons on a single page (Swift 5.0)?Swift