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:

My Personal Notes

Recommended Posts: