CSS :nth-of-type(n) Selector with Example
The :nth-of-type(n) selector in CSS is a pseudo-class that allows you to select every element that is the nth sibling of its type.
It is especially useful when you want to apply specific styling to certain elements of the same type in a list or group without applying it to others. For example, p:nth-of-type(2) { } will apply the CSS style to every <p> element that is the second sibling.
The general syntax to use :nth-of-type(n) selector in CSS is as follows:
element:nth-of-type(n) {
/* CSS properties */
}In the above syntax, the element specifies the type of element. For example, p, div, li, etc.. This selector accepts an argument n which specifies the element to be targeted. The argument n can be:
- A specific number (e.g., 1, 2, 3)
- A keyword (e.g., odd, even)
- A formula (e.g., 2n+1)
Basic Examples on CSS :nth-of-type(n) Selector
Let’s take an example in which we will select every second li element within a list.
Example 1:
<!DOCTYPE html>
<html>
<head>
<style>
/* Styling second element within the list. */
li:nth-of-type(2) {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4</li>
<li>List Item 5</li>
<li>List Item 6</li>
</ul>
</body>
</html>
Output:
In this example, the selector li:nth-of-type(2) will turn the second li element red and bold within the list.
Let’s take another example where we will style the elements that are in even positions within a list using the :nth-of-type(even) selector. This selector will target every even-numbered element of the specified type.
Example 2:
<!DOCTYPE html>
<html>
<head>
<style>
/* Styling even elements within the list. */
li:nth-of-type(even) {
color: white;
font-weight: bold;
background-color: red;
}
</style>
</head>
<body>
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4</li>
<li>List Item 5</li>
<li>List Item 6</li>
</ul>
</body>
</html>
Output:
In this example, the selector li:nth-of-type(even) will select every p element in the even positions such as 2nd, 4th, etc. and apply the CSS rules.
Advanced Examples based on nth-of-type Selector
Let’s take an example where we will select every p element that is in an odd position within the parent div element using the :nth-of-type(odd) selector. This selector will target every odd-numbered element of the specified type.
Example 3:
<!DOCTYPE html>
<html>
<head>
<style>
/* Styling odd p elements. */
p:nth-of-type(odd) {
color: white;
font-weight: bold;
background-color: green;
}
</style>
</head>
<body>
<div>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<p>Paragraph 4</p>
</div>
</body>
</html>
In this example, the selector p:nth-of-type(odd) will select every odd p elements (1st, 3rd, etc.) and apply the CSS rules. You can also achieve it using the formula (2n+1) to select odd indexed elements. The CSS code is as follows:
p:nth-of-type(2n+1) {
color: white;
font-weight: bold;
background-color: green;
}Let’s take an example where we will target a specific range of elements.
Example 4:
<!DOCTYPE html>
<html>
<head>
<style>
/* Styling a specific range of elements. */
p:nth-of-type(n+2):nth-of-type(-n+4) {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<div>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<p>Paragraph 4</p>
<p>Paragraph 5</p>
</div>
</body>
</html>
In this code, the selector p:nth-of-type(n+2):nth-of-type(-n+4) will select the 2nd, 3rd, and 4th p elements and apply the CSS rules. The formula n+2 starts from the 2nd element, and -n+4 ends at the 4th element.
Output:
Common Errors
1. Confusing :nth-child(n) and :nth-of-type(n):
The :nth-child(n) selector in CSS selects elements based on their position relative to all siblings, regardless of their type. It targets the nth child of its parent element, counting all types of children.
The :nth-of-type(n) selector in CSS selects elements based on their position relative only to siblings of the same type. It targets the nth occurrence of a specific element type within its parent, ignoring other types of siblings.
<div>
<p>Paragraph 1</p>
<span>Span 1</span>
<p>Paragraph 2</p>
</div>
In the above HTML code, the selector p:nth-child(2) will select nothing because the second child is a span. Whereas, the selector p:nth-of-type(2) will select the second p.
2. Forgetting Element Types: Since the :nth-of-type(n) selector only applies to a specific type of elements, forgetting to specify the correct element type can lead to unexpected results. For example, using :nth-of-type(n) without an element type will not work.
