CSS selects the second child element
CSS Select Second Child
In CSS, we often need to select the child elements of an element for style settings. Sometimes we need to select the second child element, and in this case, we need to use some specific selectors to achieve this. This article will detail how to use CSS to select the second child element and provide multiple example code to help readers better understand.
1. Using the :nth-child() Selector
The :nth-child() selector selects the child element at a specified position. The parameter n can be a specific number or a formula. To select the second child element, we can use :nth-child(2).
The sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Select Second Child Element Example</title>
<style>
div:nth-child(2) {
color: red;
}
</style>
</head>
<body>
<div>First Child Element</div>
<div>Second Child Element</div>
<div>Third Child Element</div>
</body>
</html>
Code Running Result:
In this example, we use the :nth-child(2) selector to select the second div element and set its text color to red.
You can see that the text color of the second child element has changed to red.
2. Use the :nth-of-type() selector
The :nth-of-type() selector is similar to the :nth-child() selector, but it selects based on the type of the element. To select the second child element, we can use :nth-of-type(2).
The sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Select Second Child Element Example</title>
<style>
div:nth-of-type(2) {
font-weight: bold;
}
</style>
</head>
<body>
<div>First Child Element</div>
<p>Second Child Element</p>
<div>Third Child Element</div>
</body>
</html>
Code Running Result:
In this example, we use the :nth-of-type(2) selector to select the second div element and set its text to bold.
As you can see, the text of the second child element has become bold.
3. Use :first-child and :nth-child() to select the second child element
Sometimes we need to select the second child element but exclude the first child element. In this case, we can use the :first-child and :nth-child() selectors together.
Sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Select Second Child Example</title>
<style>
div:first-child + div {
color: blue;
}
</style>
</head>
<body>
<div>First Child</div>
<div>Second Child</div>
<div>Third Child</div>
</body>
</html>
Code Execution Result:
In this example, we use the div:first-child + div selector to select the second div element and set its text color to blue.
As you can see, the text color of the second child element has changed to blue.
4. Selecting the Second Child Using :nth-child(odd) and :nth-child(even)
In addition to selecting child elements at specific positions, we can also select child elements at odd and even positions. To select the second child, we can combine the :nth-child(odd) and :nth-child(even) selectors.
Sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Select Second Child Example</title>
<style>
div:nth-child(even) {
background-color: lightgray;
}
</style>
</head>
<body>
<div>First Child</div>
<div>Second Child</div>
<div>Third Child</div>
</body>
</html>
Code Execution Result:
In this example, we use the div:nth-child(even) selector to select even-numbered div elements and set their background color to light gray.
As you can see, the background color of the second child element has changed to light gray.
5. Selecting Multiple Child Elements with :nth-child(n)
Sometimes we need to select multiple child elements, not just the second one. We can use the :nth-child(n) selector with commas to select multiple child elements.
The sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Select Second Child Element Example</title>
<style>
div:nth-child(2), div:nth-child(4) {
font-style: italic;
}
</style>
</head>
<body>
<div>First Child Element</div>
<div>Second Child Element</div>
<div>Third Child Element</div>
<div>Fourth Child Element</div>
</body>
</html>
Code Running Result:
In this example, we use the div:nth-child(2), div:nth-child(4) selectors to select the second and fourth div elements and set their text to italic.
As you can see, the text of the second and fourth child elements has become italic.
6. Use :nth-child(n) to select the second-to-last child element
Sometimes we need to select the second-to-last child element. We can use the :nth-last-child(n) selector.
The sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Select Second Child Example</title>
<style>
div:nth-last-child(2) {
text-decoration: underline;
}
</style>
</head>
<body>
<div>First Child</div>
<div>Second Child</div>
<div>Third Child</div>
</body>
</html>
Code Running Result:
In this example, we use the div:nth-last-child(2) selector to select the second-to-last div element and set its text to underline.
As you can see, the text of the second-to-last child element has become underlined.
7. Use :nth-child(n) to select a specific type of child element
Sometimes we need to select a specific type of child element. We can use the :nth-child(n of type) selector.
The sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Select Second Child Element Example</title>
<style>
p:nth-child(2) {
color: green;
}
</style>
</head>
<body>
<div>First Child Element</div>
<p>Second Child Element</p>
<div>Third Child Element</div>
<p>Fourth Child Element</p>
</body>
</html>
Code Running Result:
In this example, we use the p:nth-child(2) selector to select the second p element and set its text color to green.
As you can see, the text color of the second and fourth child elements has changed to green.
8. Use :nth-child(n) to select child elements of a specific class
Sometimes we need to select child elements of a specific class. We can use the :nth-child(n of .class) selector.
The sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Select Second Child Element Example</title>
<style>
.special:nth-child(2) {
background-color: yellow;
}
</style>
</head>
<body>
<div class="special">First Child Element</div>
<div>Second Child Element</div>
<div class="special">Third Child Element</div>
</body>
</html>
Code Running Result:
In this example, we use the .special:nth-child(2) selector to select the second div element of a specific class and set its background color to yellow.
As you can see, the background color of the second child element of a specific class has become yellow.
9. Use :nth-child(n) to select child elements with specific attributes
Sometimes we need to select child elements with specific attributes. We can use the :nth-child(n of [attribute]) selector.
The sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Select Second Child Element Example</title>
<style>
[data-type="example"]:nth-child(2) {
font-size: 20px;
}
</style>
</head>
<body>
<div data-type="example">First Child Element</div>
<div data-type="example">Second Child Element</div>
<div data-type="example">Third Child Element</div>
</body>
</html>
Code Running Result:
In this example, we use the [data-type=”example”]:nth-child(2) selector to select the second div element with a specific attribute and set its text size to 20 pixels.
As you can see, the text size of the second child element with a specific attribute becomes 20 pixels.
10. Use :nth-child(n) to select child elements in a specific state
Sometimes we need to select child elements in a specific state. We can use the :nth-child(n of :hover) selector.
Sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Select Second Child Example</title>
<style>
div:nth-child(2 of :hover) {
border: 2px solid red;
}
</style>
</head>
<body>
<div>First Child</div>
<div>Second Child</div>
<div>Third Child</div>
</body>
</html>
Code Running Result:
In this example, we use the div:nth-child(2 of :hover) selector to select the second div element in the hover state and set its border to a 2-pixel solid red line.
As you can see, the border of the second child element in the hover state becomes a 2-pixel solid red line.
Through the above code, we’ve detailed how to use CSS to select the second child element and provided multiple examples to help readers better understand.