Table of contents

Introduction

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

Best practices and Tips for using nth child

Uses of nth child

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?

Conclusion

Last Updated: Mar 27, 2024

Easy

nth child Selector in CSS

Author Tashmit

Do you think IIT Guwahati certified course can help you in your career?

Yes

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.

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

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

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

Explanation

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

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-1, CSS 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!