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
Recommend
Specific usage of textarea's disabled and readonly attributes
disabled definition and usage The disabled attrib...
Introduction to commonly used fonts on the Web (fonts supported by iOS and Android browsers)
It's the end of the year and there are fewer ...
Vue plugin error: Vue.js is detected on this page. Problem solved
Vue plugin reports an error: Vue.js is detected o...
Things to note when writing self-closing XHTML tags
The img tag in XHTML should be written like this:...
MySQL independent index and joint index selection
There is often a lack of understanding of multi-c...
mysql5.7.17.msi installation graphic tutorial
mysql-5.7.17.msi installation, follow the screens...
In-depth understanding of Mysql transaction isolation level and locking mechanism issues
Overview Databases generally execute multiple tra...
The shell script regularly counts the PV of access.log under Nginx and sends it to the API and saves it in the database
1. Statistics of PV and IP Count the PV (Page Vie...
HTML markup language - reference
Click here to return to the 123WORDPRESS.COM HTML ...
Will this SQL writing method really cause the index to fail?
Preface There are often some articles on the Inte...
4 ways to modify MySQL root password (summary)
Method 1: Use the SET PASSWORD command First log ...
Draw a heart with CSS3
Achieve resultsRequirements/Functionality: How to...
Introduction and use of five controllers in K8S
Table of contents Controller type of k8s Relation...
Detailed explanation of the principle of Docker image layering
Base image The base image has two meanings: Does ...
A brief discussion on spaces and blank lines in HTML code
All consecutive spaces or blank lines (newlines) ...