CSS get the second child node without getting the node under the child node
CSS Gets the Second Child Node Instead of the Nodes Under It
In CSS stylesheets, we often use child selectors to select specific child elements. However, sometimes we want to select specific elements within a child’s child rather than the direct child. This article will discuss in detail how to use CSS selectors to get the second child node without retrieving all nodes below it.
Understanding CSS Selectors
In CSS, we can use different types of selectors to select elements in HTML. The child selector is one of them. A child selector only selects the direct child elements of a specified element, not all descendant elements.
For example, assume we have the following HTML structure:
<div class="parent">
<div class="child">Child 1</div>
<div class="child">Child 2</div>
</div>
If we want to select the second child element (.child), we can use the child selector:
.parent > .child:nth-child(2) {
color: blue;
}
The above code uses :nth-child(2) to select the second .child element under the .parent element and set the text color to blue.
Get the second child node
However, sometimes we do not want to select all descendant elements under the direct child element, but only select the second child element and ignore all the elements under it. In this case, we can use the :nth-of-type() selector.
Continuing with the above HTML structure as an example, if we want to select the second child element .child without including all the child elements under it, we can use the following code:
.parent > .child:nth-of-type(2) {
color: red;
}
In the above code, :nth-of-type(2) will only select the second .child element, and will not select the child elements under it. This way, we can achieve the effect of selecting only the second child element.
Sample Code
To better understand how to use the :nth-of-type() selector to retrieve the second child node without retrieving the nodes below it, we can look at an actual sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS selector example</title>
<style>
.parent {
background-color: lightgray;
padding: 10px;
}
.child {
margin: 5px;
padding: 5px;
background-color: white;
border: 1px solid black;
}
.parent > .child:nth-of-type(2) {
color: blue;
background-color: yellow;
} </style>
</head>
<body>
<div class="parent">
<div class="child">Child 1
<div class="grandchild">Grandchild 1</div>
<div class="grandchild">Grandchild 2</div>
</div>
<div class="child">Child 2
<div class="grandchild">Grandchild 3</div>
<div class="grandchild">Grandchild 4</div>
</div>
</div>
</body>
</html>
In this example, we define a .parent element that contains two .child child elements, each of which contains two .grandchild child elements. We use :nth-of-type(2) to select the second .child element and set its text color to blue and its background color to yellow. This selects only the second child element, ignoring all its children.
Result Display
Through the above example code, we can see that only the text color of the second .child element on the page changes to blue and its background color changes to yellow, while the first .child element and all its children remain unchanged. This achieves the effect of selecting only the second child element.
In this way, we can flexibly use CSS selectors to precisely select the elements we need, while avoiding the style confusion caused by selecting other elements.