How to select all child elements recursively using CSS?

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 select all element of specific parent.

Syntax:

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

Example 1: This example selects all the child element.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>                    

chevron_right


Output:

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
      
<head>
    <title>
        Child element selector
    </title>
      
    <style>
        div.GFG, 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>                    

chevron_right


Output:



My Personal Notes arrow_drop_up


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.