YogeshChauhan . com

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

amazon

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 How to Use SQL MAX() Function with Dates? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

Jun 16 What are Stored Procedures for SQL Server? Jun 16 What are Class Constants in PHP? Jun 15 A short basic guide on states in React Jun 15 How to define constants in PHP? Jun 15 How to define visibility for a property in PHP? Jun 15 How to use @if and @else in SCSS?

You might also like these

Use eq() method in jQueryjQueryIntroduction to Angular modules Part 1: NgModule metadataAngularHow to implement NSNumberFormatter in Swift for currency?SwiftCSS backface-visibility PropertyCSSINTERSECT and EXCEPT in PostgresPostgresWindow setInterval() Method in JavaScriptJavaScript