Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to select all child elements recursively using CSS?

  • Difficulty Level : Basic
  • Last Updated : 30 Jul, 2021

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:

CSS is the foundation of webpages, is used for webpage development by styling websites and web apps.You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!