CSS :nth-child(n) Selector with Examples
The :nth-child(n) selector is a pseudo-class in CSS that allows you to select every element that is the nth child of its parent. This class takes an argument n, which represents an integer.
This selector matches elements based on their order within a parent element. For example, the span:nthchild(2) styles every span element that is the second child of its parent.
Thus, this pseudo-class selector allows you to apply styles to elements dynamically, based on their position, with no need to add classes or IDs manually.
Syntax for nth-child(n) Selector in CSS
CSS :nth-child(n) selector selects one or more elements based on their position relative to their siblings. The general syntax to use nth-child(n) selector is as follows:
element:nth-child(n) {
/* CSS rules here */
}In this syntax, the term element represents the type of element you want to target. For example, div, p, li, span, etc. The parameter n takes an integer value that determines which child elements are selected.
Let’s take some basic examples based on the CSS :nth-child(n) selector.
Selecting Specific Elements
If you want to style a specific element, simply provide the number of that element.
Example 1:
<!DOCTYPE html>
<html>
<head>
<title>nth-child Selector Example</title>
<style>
/* Selects the third child element of its parent element.*/
.paragraphs p:nth-child(3) {
color: blue;
}
</style>
</head>
<body>
<h2>Paragraph Example</h2>
<div class="paragraphs">
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<p>Paragraph 4</p>
</div>
</body>
</html>
In this example, the p:nth-child(3) selector will apply the CSS style to the third child element (i.e. <p>Paragraph 3</p>) inside the parent div element. It will change the text color of the third paragraph inside the div with the class attribute value “paragraphs” to blue.
Selecting List Item
If you want to style every second list item within the parent element, you can simply use 2n as the argument in the nth-child selector like this: li:nth-child(2n). This will select and apply styles to every second li element within the parent.
In this li:nth-child(2n), the argument 2n creates a pattern that matches every second child, starting from the first one.
In this case, n starts at 1 and increases (1, 2, 3, etc.).
- When n = 1, 2n equals 2, so the second list item is selected.
- When n = 2, 2n equals 4, so the fourth list item is selected and so on.
Example 2:
<!DOCTYPE html>
<html>
<head>
<title>CSS nth-child Selector Example</title>
<style>
/* Selects every second list item of its parent element.*/
ul li:nth-child(2n) {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h2>List Example</h2>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</body>
</html>
Output:
In this example, we have a <ul> element that contains six li items. The li:nth-child(2n) selector will select every second list item inside the <ul> element. This selector applies a background color of #f2f2f2 to Item 2, Item 4, and Item 6.
As you can understand from the above examples, how the :nth-child(n) selector style the elements based on their order within a parent element.
Using odd and even Keywords with CSS :nth-child Selector
You can use the odd and even keywords with the :nth-child selector to style elements based on their position within their parent element.
The keyword odd selects elements at odd-numbered positions such as 1st, 3rd, 5th, etc.. On the other hand, the keyword selects elements at even-numbered positions such as 2nd, 4th, 6th, etc..
Note that the odd and even keywords are equivalent to 2n+1 and 2n, respectively. Below is a complete example showing how to use odd and even keywords with :nth-child selector pseudo-class.
Example 3:
<!DOCTYPE html>
<html>
<head>
<title>nth-child(n) Odd and Even Example</title>
<style>
/* Selects and styles odd-numbered list items */
ul li:nth-child(odd) {
background-color: #f2f2f2; /* Light gray background */
color: black;
}
/* Selects and styles even-numbered list items */
ul li:nth-child(even) {
background-color: green; /* green background */
color: white;
}
</style>
</head>
<body>
<h2>List Example</h2>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</body>
</html>
Output:
In this example, we have an <ul> element containing six li items. Each li element represents a list item. The ul li:nth-child(odd) selector selects all odd-numbered list items (1st, 3rd, 5th) and applies a light gray background (#f2f2f2) color with black text.
Similarly, the ul li:nth-child(even) selector selects all even-numbered list items (2nd, 4th, 6th) and applies a green background color with white text. Thus, Item 1, Item 3, and Item 5 will have a light gray background with black text. Whereas, Item 2, Item 4, and Item 6 will have a green background with white text.
This example shows how to use odd and even keywords with the :nth-child selector to alternate styles between odd and even items in a list. We commonly use this technique for zebra striping in tables and lists.
Zebra Striping for Table Rows Using :nth-child Selector
Let’s take an example in which we will use zebra striping design pattern for tables where alternate rows will be styled differently. We can easily achieve this by using the :nth-child(odd) and :nth-child(even) selectors in CSS.
Example 4:
<!DOCTYPE html>
<html>
<head>
<style>
/* Zebra striping for table rows */
tr:nth-child(odd) {
background-color: #f9f9f9;
}
tr:nth-child(even) {
background-color: #fc6a68;
}
</style>
</head>
<body>
<h2>Zebra Striping Example</h2>
<table border="1" cellpadding="10">
<thead>
<tr>
<th>Item</th>
<th>Description</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Item 1</td>
<td>Description of Item 1</td>
<td>$10</td>
</tr>
<tr>
<td>Item 2</td>
<td>Description of Item 2</td>
<td>$15</td>
</tr>
<tr>
<td>Item 3</td>
<td>Description of Item 3</td>
<td>$20</td>
</tr>
<tr>
<td>Item 4</td>
<td>Description of Item 4</td>
<td>$25</td>
</tr>
<tr>
<td>Item 5</td>
<td>Description of Item 5</td>
<td>$30</td>
</tr>
</tbody>
</table>
</body>
</html>
Output:
Formula-Based Selection with :nth-child(an+b) Selector
The :nth-child(an+b) formula in CSS allows you to create more complex patterns when selecting elements to style. Here’s how it works:
- a: It is a multiplier, which defines the step or interval.
- n: It is a counter, which starts at 0 and increments with each element.
- b: It is an offset, which defines the starting position.
Let’s take an example where we will use the formula 3n+2 to select every third element, starting from the second one.
Example 5: Select Every 3rd Element, Starting from the 2nd
<!DOCTYPE html>
<html>
<head>
<style>
/* Selects every 3rd item, starting from the 2nd one */
ul li:nth-child(3n+2) {
background-color: #ffd700; /* Gold background for selected items */
color: black;
}
</style>
</head>
<body>
<h2>Formula-Based Selection Example</h2>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
</ul>
</body>
</html>
Output:
In this example, we have used the :nth-child(3n+2) formula where, 3n+2 starts by selecting the second element, then selects every third element after that.
- When n = 0, the formula is 3(0) + 2 = 2, so the second list item is selected.
- When n = 1, the formula is 3(1) + 2 = 5, so the fifth list item is selected.
- When n = 2, the formula is 3(2) + 2 = 8, so the eighth list item is selected.
The selector ul li:nth-child(3n+2) applies a gold background (#ffd700) to the 2nd, 5th, and 8th list items.
This example demonstrates how you can use the formula an+b in the CSS :nth-child selector to create more specific and complex selection patterns. I hope that you will have understood the :nth-child(n) selector in CSS with the help of examples and practiced all examples.
