Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Select All Child Elements Recursively Using CSS
To select all child elements recursively using CSS, we have used universal selector(*) with parent selector.
In this article we are having eight paragraph elements out of which six are wrapped inside div container, our task is to select all child elements recursively using CSS.
Steps to select all child elements recursively using CSS
We will be following below mentioned steps to select all child elements recursively using CSS:
- We have used eight paragraph elements and six paragraph elements are wrapped inside div container. All the six paragraph elements are direct child elements of div container except paragraph 4 which is wrapped inside span tag.
- We have set the background-color to display the selected elements and also set the max-width of the background.
- Example 1 shows how we can select all the direct child elements of div container. The direct descendants are selected using .container > *.
- Example 2 shows how to select all child elements recursively using CSS. For selecting all child elements recursively we have used .container *.
- The Paragraph 7 and 8 is not selected in any example as they are not the child of parent div element.
Example 1
This example only selects the direct descendants of parent div as we can see Paragraph 4 has not been selected as it is inside span tag.
<!DOCTYPE html>
<html>
<head>
<style>
.container> * {
background-color: #c0a2f0;
max-width: fit-content;
}
</style>
</head>
<body>
<h3>
Selecting All Child Elements Recursively
using CSS
</h3>
<p>
In this example we have selected only the
<strong>direct child elements</strong> of
parent div element.
</p>
<div class="container">
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<span>
<p>Paragraph 4</p>
</span>
<p>Paragraph 5</p>
<p>Paragraph 6</p>
</div>
<p>Paragraph 7</p>
<p>Paragraph 8</p>
</body>
</html>
Example 2
This example selects all child elements recursively using CSS. As we can see paragraph 4 is not direct descendant of parent div but still it has been selected.
<!DOCTYPE html>
<html>
<head>
<style>
.container * {
background-color: #c0a2f0;
max-width: fit-content;
}
</style>
</head>
<body>
<h3>
Selecting All Child Elements Recursively
using CSS
</h3>
<p>
In this example we have used <strong>universal
selector(*)</strong> to select all child elements
recursively using CSS.
</p>
<div class="container">
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<span>
<p>Paragraph 4</p>
</span>
<p>Paragraph 5</p>
<p>Paragraph 6</p>
</div>
<p>Paragraph 7</p>
<p>Paragraph 8</p>
</body>
</html>
Conclusion
In this article, we understood how to select all child elements recursively using CSS. We have discussed two examples to differentiate between selecting direct child elements of parent div(Example 1) and selecting all child elements of parent div recursively(Example 2).
13K+ Views
