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.
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.
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 
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 button in the code editor above to see the output of our HTML/CSS code.
"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
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.
