CSS provides the :nth-child() selector which is ver useful select different elements with different rules and apply some CSS to these elements. :nth-child() is provided in the CSS version 3.
Syntax
CSS :nth-child() has the following syntax
:nth-child(NUMBER){
CSS
}
- `:nth-child` is the keyword
- `NUMBER` is the selected number or rule used to apply CSS. It can be `even`, `odd`, `1` or `2n+1` where we will look at all of the detail below.
- `CSS` is the CSS code we want to apply to the elements those match with the selector of NUMBER.
Select nth Children/Elements
We will start with a simple example where we will provide the element or child number we want to select and apply CSS. In this example, we will only select the fifth element or child and make its background color red.
<html>
<head>
<style>
p:nth-child(5) {
background: red;
}
</style>
</head>
<body>
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>
<p>The fifth paragraph.</p>
<p>The sixth paragraph.</p>
<p>The seventh paragraph.</p>
<p>The eight paragraph.</p>
<p>The ninth paragraph.</p>
<p>The tenth paragraph.</p>
</body>
</html>
Select Even Children/Elements
There are some pre-configured selection keywords like even, od, etc. We can use even keyword in or select even-numbered elements in the given elements or child. We can also use 2n to select even elements.
<html>
<head>
<style>
p:nth-child(even) {
background: red;
}
</style>
</head>
<body>
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>
<p>The fifth paragraph.</p>
<p>The sixth paragraph.</p>
<p>The seventh paragraph.</p>
<p>The eight paragraph.</p>
<p>The ninth paragraph.</p>
<p>The tenth paragraph.</p>
</body>
</html>
Select Odd Children/Elements
We can also use odd keyword in order to select odd-numbered elements or children. Also 2n+1 can be used to select odd elements.
<html>
<head>
<style>
p:nth-child(odd) {
background: red;
}
</style>
</head>
<body>
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>
<p>The fifth paragraph.</p>
<p>The sixth paragraph.</p>
<p>The seventh paragraph.</p>
<p>The eight paragraph.</p>
<p>The ninth paragraph.</p>
<p>The tenth paragraph.</p>
</body>
</html>
Select Given Range Childs
Select After The Specified Number
We can select after the specified number elements. In this example, we will select elements after 6 to 10.
<html>
<head>
<style>
p:nth-child(n+6) {
background: red;
}
</style>
</head>
<body>
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>
<p>The fifth paragraph.</p>
<p>The sixth paragraph.</p>
<p>The seventh paragraph.</p>
<p>The eight paragraph.</p>
<p>The ninth paragraph.</p>
<p>The tenth paragraph.</p>
</body>
</html>
Select First Three Children/Elements
We can also select the first given number of elements or children. In this example, we will select the first 3 children or elements.
<html>
<head>
<style>
p:nth-child(-n+3) {
background: red;
}
</style>
</head>
<body>
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>
<p>The fifth paragraph.</p>
<p>The sixth paragraph.</p>
<p>The seventh paragraph.</p>
<p>The eight paragraph.</p>
<p>The ninth paragraph.</p>
<p>The tenth paragraph.</p>
</body>
</html>
Select The Last Child or Element
CSS also provides selector like nth-last-child(). We can use this selector in order to select the last element or child.
<html>
<head>
<style>
p:nth-last-child(1) {
background: red;
}
</style>
</head>
<body>
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>
<p>The fifth paragraph.</p>
<p>The sixth paragraph.</p>
<p>The seventh paragraph.</p>
<p>The eight paragraph.</p>
<p>The ninth paragraph.</p>
<p>The tenth paragraph.</p>
</body>
</html>
