Skip to main content
X

Explore your training options in 10 minutes

CSS Tutorials

CSS Nth Child: The Complete Guide

James Gallagher - January 06, 2021


The CSS :nth-child() selector applies a style to elements at a specific position in a group. Often, the :nth-child() selector is used to style particular list items, such as every second or third item.

When you’re designing a website, you may want to apply a style to only a select set of elements in a container. For instance, you may only want to apply a style to every second element in a list, or every third row in a table.

That’s where the CSS :nth-child pseudo-class comes in. The :nth-child pseudo-class matches elements based on their position in a list of items on an HTML page.

Get offers and scholarships from top coding schools illustration

Find Your Bootcamp Match

  • Career Karma matches you with top tech bootcamps
  • Access exclusive scholarships and prep courses










By continuing you agree to our Terms of Service and Privacy Policy , and you consent to receive offers and opportunities from Career Karma by telephone, text message, and email.

This tutorial will discuss, with reference to examples, the basics of pseudo-classes and how you can use the :nth-child pseudo-class. By the end of reading this tutorial, you’ll be an expert at using the :nth-child pseudo-class to select elements on a web page.

CSS Pseudo-Classes

In CSS, selectors are used to select specific elements on a web page to which a style should be applied. For example, a selector could change the text color of all <p> elements on a web page to green.

You may decide that you only want to apply a style to an element which exists in a specific state. Pseudo-classes allow you to apply styles only when an element is in a specific state.

CSS :nth-child Pseudo-Class

The :nth-child pseudo-class applies styles to elements in a group. You can apply styles to a specific element based on its position or multiple elements. A common :nth-child rule is to color every element at an odd or even position in the list.

Here is the syntax of the :nth-child pseudo-class:

li:nth-child(2) {
	color: lightblue;
}

Let’s break down this example:

  • li refers to the element to which a style should be applied.
  • nth-child is the selector used to match an element.
  • 2 is the formula used to match an element using nth-child.

In this case, we applied our style to every second <li> element in a list.

:nth-child Accepted Values

The :nth-child pseudo-class accepts two types of values. First, the pseudo-class accepts keyword values which are assigned default formulas. These keywords are:

  • odd: Selects elements whose position in a list is an odd number.
  • even: Selects elements whose position in a list is an even number.

Second, the :nth-child pseudo-class accepts a custom formula which specifies the elements the pseudo-class should select on a web page. Here are a few example formulas:

  • :nth-child(6): Selects the sixth element in a list.
  • :nth-child(n+2): Selects the second element and all subsequent elements.
  • :nth-child(4n): Selects all elements that are a multiple of 4.

n is equal to the position in which an item appears in a list.

Now we know the basics of the :nth-child pseudo-class, we can explore a few examples of the pseudo-class in action.

Venus, a software engineer at Rockbot

"Career Karma entered my life when I needed it most and quickly helped me match with a bootcamp. Two months after graduating, I found my dream job that aligned with my values and goals in life!"

Venus, Software Engineer at Rockbot

CSS :nth-child Examples

Let’s walk through two examples of the :nth-child pseudo-class.

:nth-child Table

One common use of the :nth-child pseudo-class is to select rows in a table.

Suppose we are designing a website for a local cookery club. The club has asked us to put together a table for their website with the recipe for their special spiced hot chocolate . The club wants every second row in the table to be highlighted in hot pink, which is the club’s main color.

We could create this table using the following code:

<html>

<table>
  <tr>
    <th>Ingredient</th>
    <th>Quantity</th>
  </tr>
  <tr>
    <td>Skimmed Milk</td>
    <td>250 mls</td>
  </tr>
  <tr>
    <td>75% Dark Chocolate</td>
    <td>Two squares (10g)</td>
  </tr>
  <tr>
    <td>Cinnamon</td>
    <td>A pinch</td>
  </tr>
  <tr>
    <td>Honey</td>
    <td>1 tsp</td>
  </tr>
</table>

<style>
  tr:nth-child(even) {
      background-color: hotpink;
  }
</style>

Click the Image of the "Run Code" Button, a triangle inside a circle button in the code editor above to see the output of our HTML/CSS code.

We defined a table with two columns and five rows (one of which is a header row). The first column stores the list of ingredients used to make the spiced hot chocolate. Our second column stores the quantities of each ingredient used.

To learn more about how tables are created in HTML, read our guide to HTML tables .

In our CSS file, we used the :nth-child pseudo-class to apply a style to every even-numbered row in our table.

The tr selector is used to select all table rows (denoted by the <tr> tag in HTML), and the :nth-child(even) pseudo-class selects every table row with an even ID number. For each even-numbered table row, the background color of the table row is set to hot pink.

:nth-child List

Another common use of the :nth-child pseudo-class is to highlight items in a list.

Suppose we have been asked to put together a list of the names of each member of the cooking club. The text for the first three names on the list should appear in light blue, because they hold titles in the club.

We could create this list using the following code:

<html>

<ul>
	<li>Chad Bakersfield</li>
	<li>Laura Patel</li>
	<li>Eddie Mahoney</li>
	<li>Edna Jamieson</li>
	<li>Lesley Spencer</li>
	<li>James Moffat</li>
	<li>Olivia Lindsay</li>
<ul>

<style>
  li:nth-child(-n+3) {
      color: lightblue;
  }
</style>

Click the Image of the "Run Code" Button, a triangle inside a circle button in the code editor above to see the output of our HTML/CSS code.

We used a <ul> tag to define an unordered list of items. Then, we used <li> tags to add seven names to the list, with each <li> tag containing a name.

In our CSS code, we used the :nth-child selector to select the first three <li> tags in our list. Specifically, we used the formula -n+3 , which allows us to select the first three names. Then, the color of the text for the selected <li> elements was changed to light blue.

If you want to learn more about lists, check out our HTML lists guide .

Conclusion

The :nth-child selector allows you to select elements based on their position in a group to which you can apply CSS styles.

This tutorial discussed, with reference to two examples, the basics of CSS pseudo-classes, and how to use the :nth-child pseudo-class. Now you’re equipped with the knowledge you need to start using the :nth-child pseudo-class like a professional web developer!

Are you interested in learning more about CSS? Check out our How to Learn CSS guide . You’ll find top learning tips and guidance on where to find the best CSS learning resources and courses.

About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.

What's Next?

James Gallagher

About the author: James Gallagher is a self-taught programmer and the technical content manager at Career Karma. He has experience in range of programming languages and extensive expertise in Python, HTML, CSS, and JavaScript. James has written hundreds of programming tutorials, and he frequently contributes to publications like Codecademy, Treehouse, Repl.it, Afrotech, and others. He also serves as a researcher at Career Karma, publishing comprehensive reports on the bootcamp market.

Skip to main content