Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
What is nth child selector?
2.1.
Syntax
2.2.
Examples of nth child selector in CSS
2.2.1.
Example 1: Functional notation 
2.2.2.
Explanation
2.2.3.
Example 2: Odd
2.2.4.
Output
2.2.5.
Explanation
2.2.6.
Example 3: Even
2.2.7.
Explanation
3.
Best practices and Tips for using nth child
4.
Uses of nth child
5.
Frequently Asked Questions
5.1.
What does the formula in :nth-child() do?
5.2.
Can we use :nth-child() to select multiple elements at once?
5.3.
Can I use :nth-child() with pseudo-elements like ::before and ::after?
6.
Conclusion
Last Updated: Mar 27, 2024
Easy

nth child Selector in CSS

Author Tashmit
0 upvote
gp-icon
Basics of Javascript
Free guided path
10 chapters
68+ problems
gp-badge
Earn badges and level up

Introduction

There are a variety of classes and ID selectors available in CSS. In this specific article, we will study about one of the selectors called nth child selector.

nth child selector in CSS

The article will include basic concepts of nth-child selectors. We would also have a look at some of the examples of applying nth child selector to CSS.

What is nth child selector?

The :nth-child(n) selector matches every element that is the nth child of its parent amongst other siblings. Some features of n are:

  • n can be any random number
     
  • a keyword (odd or even) 
     
  • a formula (like an + b)
     

Nth child selector matches every element irrespective of the type of parent class. Let us see its syntax and some examples for better understanding.

Syntax

:nth-child(number) {
  css declarations;
}

Examples of nth child selector in CSS

Example 1: Functional notation 

Code

<!DOCTYPE html>
<html>
  <head>
    <title>:nth-child() example</title>
    <style>
      	li:nth-child(3n + 1) {
        	color: orangered;
      	}
    </style>
  </head>
  	
<body>
  <h3>nth-child(3n + 1)</h3>
    <ul>
       	<li>Python</li>
       	<li>Java</li>
       	<li>C++</li>
       	<li>JavaScript</li>
       	<li>PHP</li>
       	<li>SQL</li>
    </ul>
</body>
</html>


Output

Output

Explanation

In this example, we can clearly see that list items at position 3n+1 gets colored.

Example 2: Odd

Code

<!DOCTYPE html>
<html>
  <head>
    <title>:nth-child() example</title>
    <style>
      	li:nth-child(odd) {
        	color: orangered;
      	}
    </style>
  	</head>
  	
<body>
  <h3>nth-child(odd)</h3>
    <ul>
       	<li>Python</li>
       	<li>Java</li>
       	<li>C++</li>
       	<li>JavaScript</li>
       	<li>PHP</li>
       	<li>SQL</li>
    </ul>
</body>
</html>


Output

Output

Explanation

In this example, we can clearly see that list items at odd position gets colored.

Example 3: Even

Code

<!DOCTYPE html>
<html>
  <head>
    <title>:nth-child() example</title>
    <style>
      	li:nth-child(even) {
        	color: orangered;
      	}
    </style>
  </head>
  
<body>
  <h3>nth-child(even)</h3>
    <ul>
       	<li>Python</li>
       	<li>Java</li>
       	<li>C++</li>
       	<li>JavaScript</li>
       	<li>PHP</li>
       	<li>SQL</li>
    </ul>
</body>
</html>


Output

Output

Explanation

In this example, we can clearly see that list items at even position gets colored.

Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

Best practices and Tips for using nth child

Some of the tips for using nth child selector are:

  • Avoid using complex formulas it will help to create maintainable code.
     
  • Try to use a consistent naming convention, it will keep the code organized and easy to understand.
     
  • Always test the working of the selector on different browsers to check the compatibility.

Uses of nth child

There are many uses of nth child selector. A few of them are as follows.

  • We can use it to select every parent element for every child.
     
  • We can select a range of children elements or select a range of children.
     
  • We can also select an alternate child and create a pattern as we did in one of the examples above. 
    Check this out:  Versions of CSS

Frequently Asked Questions

What does the formula in :nth-child() do?

The nth child formula selects the elements based on the pattern of their position among parent-child. 

Can we use :nth-child() to select multiple elements at once?

Yes, we can select multiple elements using the :nth-child() at once by separating the selectors with commas. 

Can I use :nth-child() with pseudo-elements like ::before and ::after?

No, :nth-child() cannot be used with pseudo-elements. However, we can use :nth-of-type() with pseudo-elements.

Conclusion

In this article, we have discussed nth child selector in CSS. We have also seen various examples of how to use nth child selector. To learn more about CSS, you can refer to the CSS Functions Part-1CSS Layout, and CSS Selectors.

We hope this article has helped you understand nth child selector in CSS. If this article helped you in any way, then you can read more such articles on our platform, Coding Ninjas Studio. You will find articles on almost every topic on our platform. Also, for cracking good product-based companies, you can practice coding questions at Coding Ninjas. For interview preparations, you can read the Interview Experiences of popular companies.

Happy Coding!

Previous article
CSS Flexbox
Next article
CSS last child
Guided path
Free
gridgp-icon
Basics of Javascript
10 chapters
68+ Problems
gp-badge
Earn badges and level up
Live masterclass