CSS :nth-child Element Selector

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 nth Child
Select nth Child

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 Even Childs
Select Even Childs

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 Odd Childeren/Elements
Select Odd Children/Elements

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 After The Specified Number
Select After The Specified Number

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 First Three Childeren/Elements
Select First Three Children/Elements

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>
Select The Last Child or Element
Select The Last Child or Element

Leave a Comment