:nth-child()
The CSS :nth-child selector allows you to match one or more elements based on their order in its container(parent).
Syntax:
:nth-child(n) {
CSSS declarations;
} Note: n can be a number, a keyword, or a formula.
Number
Specify a font color for every element that is the third child of its parent:
<!DOCTYPE html>
<html>
<head>
<style>
.example :nth-child(3) {
color: #2a9d8f;
font-weight: bold;
}
</style>
</head>
<body>
<div class="example">
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
<p>This is the third paragraph.</p>
</div>
</body>
</html>Output:
This is the first paragraph.
This is the second paragraph.
This is the third paragraph.
Keywords
Odd and even are keywords. Keywords allow matching child elements whose index is odd or even (the index of the first child is 1):
<!DOCTYPE html>
<html>
<head>
<style>
.example :nth-child(odd) {
color: #2a9d8f;
}
.example :nth-child(even) {
color: #e76f51;
}
</style>
</head>
<body>
<div class="example">
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
<p>This is the third paragraph.</p>
</div>
</body>
</html>Output:
This is the first paragraph.
This is the second paragraph.
This is the third paragraph.
Formula
Formula (an + b) represents a cycle size, n is a counter (starts at 0), and b is an offset value.
Formula (2n+0) specifies a font color for all elements whose index is a multiple of 2:
<!DOCTYPE html>
<html>
<head>
<style>
.example :nth-child(2n+0) {
color: #2a9d8f;
font-weight: bold;
}
</style>
</head>
<body>
<div class="example">
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
<p>This is the third paragraph.</p>
<p>This is the fourth paragraph.</p>
<p>This is the fifth paragraph.</p>
<p>This is the sixth paragraph.</p>
<p>This is the seventh paragraph.</p>
<p>This is the eight paragraph.</p>
</div>
</body>
</html>Output:
This is the first paragraph.
This is the second paragraph.
This is the third paragraph.
This is the fourth paragraph.
This is the fifth paragraph.
This is the sixth paragraph.
This is the seventh paragraph.
This is the eight paragraph.
:nth-of-type()
The CSS :nth-of-type selector allows you to match one or more elements of a particular type, of its container(parent).
Syntax:
:nth-of-type(n) {
CSS declarations;
} Note: n can be a number, a keyword, or a formula.
Number
Specify a font color and a font-weight for every <h4> element that is the third h4 child of its parent:
<!DOCTYPE html>
<html>
<head>
<style>
.example h4:nth-of-type(3) {
color: #2a9d8f;
font-weight: bold;
}
</style>
</head>
<body>
<div class="example">
<h4>This is a heading.</h4>
<p>This is the first paragraph.</p>
<h4>This is a heading.</h4>
<p>This is the second paragraph.</p>
<h4>This is a heading.</h4>
<p>This is the third paragraph.</p>
<h4>This is a heading.</h4>
</div>
</body>
</html>Output:
This is a heading.
This is the first paragraph.
This is a heading.
This is the second paragraph.
This is a heading.
This is the third paragraph.
This is a heading.
Keywords
Odd and even are keywords. Keywords allow matching child elements whose index is odd or even (the index of the first child is 1):
<!DOCTYPE html>
<html>
<head>
<style>
.example :nth-of-type(odd) {
color: #2a9d8f;
}
.example :nth-of-type(even) {
color: #e76f51;
}
</style>
</head>
<body>
<div class="example">
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
<p>This is the third paragraph.</p>
</div>
</body>
</html>Output:
This is the first paragraph.
This is the second paragraph.
This is the third paragraph.
Formula
Formula (an + b) represents a cycle size, n is a counter (starts at 0), and b is an offset value.
Formula (2n+0) specifies a font color for all <p> elements whose index is a multiple of 2:
<!DOCTYPE html>
<html>
<head>
<style>
.example :nth-of-type(2n+0) {
color: #2a9d8f;
font-weight: bold;
}
</style>
</head>
<body>
<div class="example">
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
<p>This is the third paragraph.</p>
<p>This is the fourth paragraph.</p>
<p>This is the fifth paragraph.</p>
<p>This is the sixth paragraph.</p>
<p>This is the seventh paragraph.</p>
<p>This is the eight paragraph.</p>
</div>
</body>
</html>Output:
This is the first paragraph.
This is the second paragraph.
This is the third paragraph.
This is the fourth paragraph.
This is the fifth paragraph.
This is the sixth paragraph.
This is the seventh paragraph.
This is the eight paragraph.
Note: Using the :nth-child or :nth-of-type selectors are dependent on your styling goal. If you want to match an interval of a selector regardless of the type of element it is, use :nth-child selector. If you want to match a specific type only and apply an interval selection from there, use :nth-of-type selector.
Enjoy coding!