CSS second child element
CSS Second Child Element
In CSS, we often need to set styles for elements on the page. Sometimes, we need to select specific child elements within an element for styling, such as the second child. This article details how to use CSS selectors to select the second child of an element, and provides some code examples.
1. Using the :nth-child() Pseudo-Class
To select the second child of an element, we can use the CSS :nth-child() pseudo-class. This pseudo-class allows us to select child elements at specific positions, including the second, third, even/odd, and so on.
The syntax format is as follows:
parent element:nth-child(n) {
/* Style settings */
}
Where, n is an integer representing the position of the child element to be selected. If we want to select the second child element, we can set n to 2.
For example, if we have a ul list and want to set the background color of the second li element to red, we can write the CSS code like this:
ul li:nth-child(2) {
background-color: red;
}
2. Example Code
Let’s use a simple example to demonstrate how to select the second child element of an element.
HTML code:
<!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>CSS Second Child Element Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div>First child</div>
<div>Second child</div>
<div>Third child</div>
</div>
</body>
</html>
CSS code (styles.css):
.container div:nth-child(2) {
background-color: lightblue;
color: white;
padding: 10px;
}
In the example above, we select the second div child element under the .container element, set the background color to light blue, the text color to white, and add padding.
3. Run Results
When we open the sample code above in a browser, we’ll see that the background color of the second child element on the page changes to light blue, the text color changes to white, and it has a 10px padding.
By using the :nth-child() pseudo-class, we can easily select and style the second child of an element. This method is very convenient and flexible, giving us greater control over the styling of elements on a web page.