How to recursively select all child elements using CSS?

Child selectors match when the element is a child of some element. A sub-selector consists of two or more selectors separated by ">". Also known as Element > Element Selector . It selects all elements of a specific parent.

The syntax is as follows:

Selects all child elements.
```
element > element
```
If child elements are selected recursively, the following syntax is used.
```
div.class, div.class > * {     // CSS Property }
```

Example 1: This example selects all child elements.

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

The output is as follows:

Example 2: This example recursively selects all child elements.

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

The output is as follows:

For more front-end development related content, please refer to: lsbin - IT development technology : https://www.lsbin.com/

Check out more CSS-related content below:

How to recursively select all child elements using CSS?

Guess you like