Skip to content
Related Articles

Related Articles

How to select all child elements recursively using CSS?
  • Last Updated : 04 Nov, 2020
GeeksforGeeks - Summer Carnival Banner

A child selector matches when an element is the child of some element. A child selector is made up of two or more selectors separated by “>”. It is also known as element > element selector. It selects all element of a specific parent.

Syntax:

  • Select all child elements.
    element > element
  • If child elements select recursively then use the following syntax.
    div.class > * {
        // CSS Property
    }

Example 1: This example selects all the child element.




<!DOCTYPE html>
<html>
      
<head>
    <title>
        Child element selector
    </title>
      
    <style>
        div > p {
            background-color: green;
        }
    </style>
</head>
  
<body>
    <div>
        <p>Paragraph 1</p>
        <p>Paragraph 2</p>
        <span>
            <p>Paragraph 3</p>
        </span>
    </div>
      
    <p>Paragraph 4</p>
    <p>Paragraph 5</p>
  
</body>
</html>                    

Output:

Example 2: This example selects all the child elements recursively.




<!DOCTYPE html>
<html>
      
<head>
    <title>
        Child element selector
    </title>
      
    <style>
        div.GFG > * {
            background-color: green;
        }
    </style>
</head>
  
<body>
    <div class="GFG">
        <p>Paragraph 1</p>
        <p>Paragraph 2</p>
        <span>
            <p>Paragraph 3</p>
        </span>
    </div>
      
    <p>Paragraph 4</p>
    <p>Paragraph 5</p>
  
</body>
</html>                    

Output:

Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.




My Personal Notes arrow_drop_up
Recommended Articles
Page :