Detailed explanation of how to select all child elements using CSS

How to recursively select all child elements using CSS? The following article will introduce to you how to recursively select all child elements using CSS. I hope it will be helpful to you.

When an element is a child of some other element, you can match it using the child selector, which selects all child elements of a specific parent. A child selector consists of two or more selectors separated by ">"; it is also called an element > element selector.

Note: The child selector can only select its own subclasses, second-level elements, but cannot select elements below the second level.

grammar:

Selects all child elements of a specified element

element1 > element2

If you want to recursively select all child elements, use the following syntax

element1 > * {
    // CSS styles}

Example 1: Select all child elements

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Child element selector</title>
	<style> 
	        .demo > p{ 
	            background-color: green; 
	            padding: 5px;
	        } 
	 </style> 
</head> 
  
<body> 
    <div class="demo"> 
        <p>Paragraph 1</p> 
        <p>Paragraph 2</p> 
        <span>Paragraph 3</span>
        <div>Paragraph 4</div>
    </div> 
      
    <p>Paragraph 6</p> 
    <p>Paragraph 7</p>
  
</html>

Effect picture:

Example 2: Recursively select all child elements

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Child element selector</title>
		<style> 
	        .demo > *{ 
	            background-color: green; 
	        } 
	    </style> 
</head> 
  
<body> 
    <div class="demo"> 
        <p>Paragraph 1</p> 
        <p>Paragraph 2</p> 
        <span>Paragraph 3</span>
        <div>Paragraph 4</div>
    </div> 
      
    <p>Paragraph 6</p> 
    <p>Paragraph 7</p>
  
</html>

Effect picture:

This is the end of this article on how to use CSS to select all child elements. For more information about how to select all child elements with CSS, please search previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!

<<: Summary of several commonly used CentOS7 images based on Docker

>>: Some suggestions for HTML beginners and novices, experts can ignore them