CSS child element selectors
CSS Child Selectors
In CSS, child selectors (child combinator selectors) are used to select direct child elements of an element. Denoted by the greater-than sign (>), child selectors only select elements that are direct children of an element, not deeper descendants.
Basic Syntax
The basic syntax of a child selector is as follows:
parent > child {
/* styles */
}
Where, parent represents the parent element, child represents the child element, and > represents the child selector.
Below, we’ll use some sample code to explain the use of child selectors in detail.
Sample Code
Example 1: Selecting Immediate Child Elements
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Child Selector Example</title>
<style>
.parent > .child {
color: red;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">Child 1</div>
<p>Child 2</p>
</div>
</body>
</html>
Output:
In the example above, we use the child selector .parent > .child to select the .child element, which is a direct child of the .parent element, and set its text color to red. After running the code, only the text color of child1 changes to red, while the text color of child2 remains unaffected.
Example 2: Selecting Multiple Child Elements
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Child Element Selector Example</title>
<style>
.parent > .child {
color: blue;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">Child Element 1</div>
<div>
<div class="child">Child Element 2</div>
</div>
</div>
</body>
</html>
Output:
In the example above, we use the child selector .parent > .child to select the .child element, which is a direct child of the .parent element, and set its text color to blue. After running the code, only the text color of child1 changes to blue, while the text color of child2 remains unaffected.
Example 3: Selecting a child element of a child element
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Child Element Selector Example</title>
<style>
.parent > .child > span {
font-weight: bold;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
<span>Child Element 1</span>
</div>
<div class="child">
<span>Child 2</span>
</div>
</div>
</body>
</html>
Output:
In the example above, we use the child selector .parent > .child > span to select the span element, which is a direct child of the .child element of the .parent element, and set its text to bold. After running the code, the text of both Child 1 and Child 2 becomes bold.
Through the above examples, we can see the usage and scope of child element selectors. In actual development, the appropriate use of child element selectors can help us more precisely control the style of page elements, improving page maintainability and readability.