How to get specific number of child elements using CSS?
The :nth-child() in CSS Selector is used to select only those elements that are the nth child, regardless of type, of its parent.
Syntax:
: nth-child(arg) {
// CSS Property;
}
where arg is an argument that represents the pattern for matching elements. It can be number, odd, even or linear equation.
- number: It represents the elements whose position is specified by the argument.
- odd: It represents the elements whose position is odd i.e., 1, 3, 5, etc.
- even: It represents the elements whose position is even i.e, 2, 4, 6, etc.
- linear equation: It represents the elements whose position matches the pattern A*n + B, for every positive integer n. Value of n starts with zero.
Example 1: This example selects the element which is passed as the argument.
<!DOCTYPE html><html> <head> <style> p:nth-child(2) { color: green; font-weight: bold; font-size: 20px; } </style></head> <body> <p>GeeksforGeeks</p> <p>GeeksforGeeks</p> <p>GeeksforGeeks</p> <p>GeeksforGeeks</p> <p>GeeksforGeeks</p> <p>GeeksforGeeks</p> <p>GeeksforGeeks</p></body> </html> |
Output:
Example 2: This example selects the even child elements.
<!DOCTYPE html><html> <head> <style> p:nth-child(even) { color: green; font-weight: bold; font-size: 20px; } </style></head> <body> <p>GeeksforGeeks</p> <p>GeeksforGeeks</p> <p>GeeksforGeeks</p> <p>GeeksforGeeks</p> <p>GeeksforGeeks</p> <p>GeeksforGeeks</p> <p>GeeksforGeeks</p></body> </html> |
Output :
Example 3: This example selects the odd child elements.
<!DOCTYPE html><html> <head> <style> p:nth-child(odd) { color: green; font-weight: bold; font-size: 20px; } </style></head> <body> <p>GeeksforGeeks</p> <p>GeeksforGeeks</p> <p>GeeksforGeeks</p> <p>GeeksforGeeks</p> <p>GeeksforGeeks</p> <p>GeeksforGeeks</p> <p>GeeksforGeeks</p></body> </html> |
Output :
Example 4: This example takes the linear equation as an argument.
<!DOCTYPE html><html> <head> <style> p:nth-child(3n + 2) { color: green; font-weight: bold; font-size: 20px; } </style></head> <body> <p>GeeksforGeeks</p> <p>GeeksforGeeks</p> <p>GeeksforGeeks</p> <p>GeeksforGeeks</p> <p>GeeksforGeeks</p> <p>GeeksforGeeks</p> <p>GeeksforGeeks</p></body> </html> |
Output:
.png)