CSS :nth-child() Selector
The :nth-child() CSS pseudo-class selector is used to match the elements based on their position in a group of siblings. It matches every element that is the nth-child, regardless of the type, of its parent.
Syntax:
:nth-child(number) {
// CSS Property
}
Where number is the single argument that represents the pattern for matching elements. It can be odd, even, or in a functional notation.
- odd: It represents elements whose position is odd in a series: 1, 3, 5, etc.
- even: It represents the elements whose position is even in a series: 2, 4, 6, etc.
- functional notation (<An+B>): It represents elements whose position of siblings matches the pattern An+B, for every positive integer or zero value of n. Here, A represents the integer step size, and B represents the integer offset.
Example 1: In this example, every odd paragraph is selected. The formula used is 2n+1 i.e 1, 3, 5, etc paragraphs are selected.
HTML
<!DOCTYPE html>
< html >
< head >
< title >CSS :nth-child Selector</ title >
< style >
p:nth-child(2n+1) {
background: green;
color: white;
}
</ style >
</ head >
< body style = "text-align:center" >
< h1 style = "color:green;" >
GeeksforGeeks
</ h1 >
< h2 >
CSS :nth-child Selector
</ h2 >
< p >
A computer science portal for geeks.
</ p >
< p >
Geeks classes an extensive classroom programme.
</ p >
</ body >
</ html >
|
Output:
Example 2: In this example, every even <li> is selected i.e. 2, 4, 6, etc.
HTML
<!DOCTYPE html>
< html >
< head >
< title >CSS :nth-child Selector</ title >
< style >
li {
width: 30%;
}
li:nth-child(even) {
background: green;
color: white;
}
</ style >
</ head >
< body style = "text-align:center" >
< h2 >
CSS :nth-child Selector
</ h2 >
< p >Sorting Algorithms</ p >
< ul >
< li >Quick sort.</ li >
< li >Merge sort.</ li >
< li >Insertion sort.</ li >
< li >Selection sort.</ li >
</ ul >
</ body >
</ html >
|
Output:
Supported Browsers: The browser supported by :nth-child() selector are listed below:
- Google Chrome 1.0
- Microsoft Edge 12.0
- Firefox 3.5
- Opera 9.5
- Apple Safari 3.1
Last Updated :
05 Jul, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...