CSS selector only gets the first level
CSS Selector: Targeting Only the First Level
In CSS, we often use selectors to select elements and apply styles to them. Sometimes we want to select only the first-level children of an element, excluding its descendants. This article will detail how to use CSS selectors to target only the first-level children.
1. Child Selector
Child selectors use the > notation to select the immediate children of an element. For example, the following code will select all elements with class child that are direct children of an element with class parent and set their background color to red.
<!DOCTYPE html>
<html>
<head>
<style>
.parent > .child {
background-color: red;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">geek-docs.com</div>
<div class="child">geek-docs.com</div>
</div>
</body>
</html>
Output:
Running result: The background color of all elements with the class child that are direct children of the element with the class parent will change to red.
2. Adjacent sibling selector
The adjacent sibling selector uses the + symbol to select the next adjacent sibling of an element. For example, the following code will select all elements with the class sibling that immediately follow an element with the class sibling and set their text color to blue.
<!DOCTYPE html>
<html>
<head>
<style>
.sibling + .sibling {
color: blue;
}
</style>
</head>
<body>
<div class="sibling">geek-docs.com</div>
<div class="sibling">geek-docs.com</div>
<div>Not a sibling</div>
</body>
</html>
Output:
Result: All elements with the class sibling immediately following an element with the class sibling will have their text color changed to blue.
3. General sibling selector
The general sibling selector uses the ~ notation to select all sibling elements following a given element. For example, the following code will select all sibling elements with the class sibling that follow the element with the class first and set their text color to green.
<!DOCTYPE html>
<html>
<head>
<style>
.first ~ .sibling {
color: green;
}
</style>
</head>
<body>
<div class="first">geek-docs.com</div>
<div class="sibling">geek-docs.com</div>
<div class="sibling">geek-docs.com</div>
</body>
</html>
Output:
Result: All sibling elements with the class sibling following the element with the class first will have their text color changed to green.
4. Pseudo-class selectors
Pseudo-class selectors can be used to select special states of an element, such as hover and click. The following code example changes the text color to orange when the mouse hovers over an element with the class hover.
<!DOCTYPE html>
<html>
<head>
<style>
.hover:hover {
color: orange;
}
</style>
</head>
<body>
<div class="hover">Hover over me</div>
</body>
</html>
Output:
Result: When you hover over an element with the class hover, the text changes color to orange.
5. Attribute Selectors
Attribute selectors can select elements with specific attributes. The following example code selects all a elements with an href attribute and sets their text color to purple.
<!DOCTYPE html>
<html>
<head>
<style>
a[href] {
color: purple;
}
</style>
</head>
<body>
Link 1
Link 2
</body>
</html>
Output:
Result: The text color of all a elements with an href attribute will change to purple.
6. Combining Selectors
We can also combine different selectors to achieve more complex selection effects. The following example code selects all elements with the class child that are direct children of an element with the class parent, and sets the text color of any subsequent elements with the class sibling to gray.
<!DOCTYPE html>
<html>
<head>
<style>
.parent > .child + .sibling {
color: gray;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">geek-docs.com</div>
<div class="sibling">Sibling 1</div>
<div class="sibling">Sibling 2</div>
</div>
</body>
</html>
Output:
Running Result: All elements with the class sibling that are direct children of an element with the class parent, and that are immediately followed by an element with the class child, will have their text changed to gray.
7. Selector Specificity
In CSS, the specificity of a selector determines which styles are applied to an element. Generally, ID selectors have the highest specificity, followed by class selectors, and finally element selectors have the lowest. The following code example demonstrates the specificity of different selectors.
<!DOCTYPE html>
<html>
<head>
<style>
#id {
color: red;
}
.class {
color: blue;
}
div {
color: green;
}
</style>
</head>
<body>
<div id="id" class="class">geek-docs.com</div>
</body>
</html>
Output:
Result: The text color will change to red because the ID selector has the highest priority.
8. Nested Selectors
In CSS, we can nest selectors to achieve more complex selection effects. The following code example demonstrates how to nest selectors to select the child elements of an element.
<!DOCTYPE html>
<html>
<head>
<style>
.parent {
color: red;
}
.parent .child {
color: blue;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">geek-docs.com</div>
</div>
</body>
</html>
Output:
Running result: The text color of the .parent element is red, and the text color of the .parent.child element is blue.
9. Selector inheritance
In CSS, child elements inherit the styles of their parent elements. The following code example demonstrates how to use inheritance to implement style transfer.
<!DOCTYPE html>
<html>
<head>
<style>
.parent {
color: red;
}
</style>
</head>
<body>
<div class="parent">
<div>geek-docs.com</div>
</div>
</body>
</html>
Output:
Result: The text color of the .parent element is red, and the text color of the child elements within the .parent element is also inherited.
10. Combining Selectors
We can also combine multiple selectors, separated by commas, to select multiple elements simultaneously. The following code example demonstrates how to select multiple elements and apply the same style.
<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, h3 {
color: purple;
}
</style>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
</body>
</html>
Output:
Running Result: The text color of the h1, h2, and h3 elements will all change to purple.
Conclusion
This article detailed how to use CSS selectors to target only the first layer of child elements, including child selectors, adjacent sibling selectors, universal sibling selectors, pseudo-class selectors, and attribute selectors. By combining different selectors, priorities, nesting, inheritance, and combinations, we can flexibly control element styles and achieve diverse page effects.