CSS takes the second element
Selecting the Second Element with CSS
In CSS, we often need to select an element or group of elements on a page for styling. Sometimes, we need to select the second element, which requires using special selectors. This article will detail how to use CSS to select the second element and provide several code examples to help readers better understand.
1. Using the :nth-child Selector
The :nth-child selector selects the nth child of a given parent element, where n can be a specific number, odd, or even. By combining the :nth-child selector with the :nth-of-type selector, we can easily select the second element.
Sample Code 1: Select the second div element and set the background color to red
<!DOCTYPE html>
<html Tutorial">html>
<head>
<style>
div:nth-of-type(2) {
background-color: red;
}
</style>
</head>
<body>
<div>First div element</div>
<div>Second div element</div>
<div>Third div element</div>
</body>
</html>
Output:
Running result: The background color of the second div element changes to red.
Example code 2: Select the second p element and set the font color to blue
<!DOCTYPE html>
<html>
<head>
<style>
p:nth-of-type(2) {
color: blue;
}
</style>
</head>
<body>
<p>First p element</p>
<p>Second p element</p>
<p>Third p element</p>
</body>
</html>
Output:
Result: The font color of the second
element changes to blue.
2. Using the :nth-of-type Selector
The :nth-of-type selector selects the nth element of a specified type. By combining the :nth-of-type selector with the :nth-child selector, we can more flexibly select the second element.
Example Code 3: Select the second span element and set the font size to 20px
<!DOCTYPE html>
<html>
<head>
<style>
span:nth-child(2) {
font-size: 20px;
}
</style>
</head>
<body>
<span>First span element</span>
<span>Second span element</span>
<span>Third span element</span>
</body>
</html>
Output:
Running result: The font size of the second span element becomes 20px.
Example Code 4: Select the second h3 element and set the text to bold
<!DOCTYPE html>
<html>
<head>
<style>
h3:nth-of-type(2) {
font-weight: bold;
}
</style>
</head>
<body>
<h3>First h3 element</h3>
<h3>Second h3 element</h3>
<h3>Third h3 element</h3>
</body>
</html>
Output:
Result: The text of the second h3 element becomes bold.
3. Using the :nth-last-child selector
The :nth-last-child selector selects the nth-to-last child of a specified parent element. By combining the :nth-last-child selector with the :nth-child selector, we can select the second-to-last element.
Example Code 5: Select the second-to-last li element and set its background color to green
<!DOCTYPE html>
<html>
<head>
<style>
li:nth-last-child(2) {
background-color: green;
}
</style>
</head>
<body>
<ul>
<li>First li element</li>
<li>Second li element</li>
<li>Third li element</li>
</ul>
</body>
</html>
Output:
Result: The background color of the second-to-last li element changes to green.
Example Code 6: Select the second-to-last a element and set the font color to purple
<!DOCTYPE html>
<html>
<head>
<style>
a:nth-last-child(2) {
color: purple;
}
</style>
</head>
<body>
First a element
Second a element
Third a element
</body>
</html>
Output:
Result: The font color of the second-to-last element (a) changes to purple.
4. Using the :nth-last-of-type Selector
The :nth-last-of-type selector selects the nth-to-last element of a specified type. By combining the :nth-last-of-type selector with the :nth-of-type selector, we can select the second-to-last element.
Example Code 7: Select the second-to-last h4 element and set the text to italic
<!DOCTYPE html>
<html>
<head>
<style>
h4:nth-last-of-type(2) {
font-style: italic;
}
</style>
</head>
<body>
<h4>First h4 element</h4>
<h4>Second h4 element</h4>
<h4>Third h4 element</h4>
</body>
</html>
Output:
Result: The text in the second-to-last h4 element becomes italic.
Example Code 8: Select the second-to-last span element and set the font size to 16px
<!DOCTYPE html>
<html>
<head>
<style>
span:nth-last-of-type(2) {
font-size: 16px;
}
</style>
</head>
<body>
<span>First span element</span>
<span>Second span element</span>
<span>Third span element</span>
</body>
</html>
Output:
Result: The font size of the second-to-last span element becomes 16px.
5. Selecting Multiple Elements Using the :nth-child(n) Selector
In addition to selecting a single element, we can also use the :nth-child(n) selector to select multiple elements, for example, the second and fourth elements.
Sample Code 9: Select the second and fourth div elements and set the background color to yellow
<!DOCTYPE html>
<html>
<head>
<style>
div:nth-child(2), div:nth-child(4) {
background-color: yellow;
}
</style>
</head>
<body>
<div>First div element</div>
<div>Second div element</div>
<div>Third div element</div>
<div>Fourth div element</div>
<div>Fifth div element</div>
</body>
</html>
Output:
Result: The background color of the second and fourth div elements changes to yellow.
Example Code 10: Select the second and third p elements and set the font color to orange
<!DOCTYPE html>
<html>
<head>
<style>
p:nth-child(2), p:nth-child(3) {
color: orange;
}
</style>
</head>
<body>
<p>First p element</p>
<p>Second p element</p>
<p>Third p element</p>
<p>Fourth p element</p>
</body>
</html>
Output:
Result: The font color of the second and third
elements changes to orange.
6. Selecting Multiple Elements Using the :nth-of-type(n) Selector
Similar to the :nth-child(n) selector, we can also use the :nth-of-type(n) selector to select multiple elements, for example, the sixth and eighth elements.
Example 11: Select the sixth and eighth h2 elements and set the text to underline
<!DOCTYPE html>
<html>
<head>
<style>
h2:nth-of-type(6), h2:nth-of-type(8) {
text-decoration: underline;
}
</style>
</head>
<body>
<h2>First h2 element</h2>
<h2>Second h2 element</h2>
<h2>Third h2 element</h2>
<h2>Fourth h2 element</h2>
<h2>Fifth h2 element</h2>
<h2>Sixth h2 element</h2>
<h2>Seventh h2 element</h2>
<h2>Eighth h2 element</h2>
</body>
</html>
Output:
Running result: The text of the sixth and eighth h2 elements becomes underlined.
Sample code 12: Select the sixth and seventh span elements and set the font size to 18px
<!DOCTYPE html>
<html>
<head>
<style>
span:nth-of-type(6), span:nth-of-type(7) {
font-size: 18px;
}
</style>
</head>
<body>
<span>First span element</span>
<span>Second span element</span>
<span>Third span element</span>
<span>Fourth span element</span>
<span>Fifth span element</span>
<span>Sixth span element</span>
<span>Seventh span element</span>
<span>Eighth span element</span>
</body>
</html>
Output:
Result: The font size of the sixth and seventh span elements becomes 18px.
7. Selecting Multiple Elements Using the :nth-last-child(n) Selector
In addition to selecting a single element, we can also use the :nth-last-child(n) selector to select multiple elements, for example, the second-to-last and third-to-last elements.
Sample Code 13: Select the second-to-last and third-to-last li elements and set their background color to gray
<!DOCTYPE html>
<html>
<head>
<style>
li:nth-last-child(2), li:nth-last-child(3) {
background-color: gray;
}
</style>
</head>
<body>
<ul>
<li>First li element</li>
<li>Second li element</li>
<li>Third li element</li>
<li>Fourth li element</li>
</ul>
</body>
</html>
Output:
Result: The background color of the second-to-last and third-to-last li elements changes to gray.
Example Code 14: Select the second-to-last and fourth-to-last a elements and set the font color to pink
<!DOCTYPE html>
<html>
<head>
<style>
a:nth-last-child(2), a:nth-last-child(4) {
color: pink;
}
</style>
</head>
<body>
First a element
Second a element
Third a element
Fourth a element
</body>
</html>
Output:
Result: The font color of the second-to-last and fourth-to-last a elements changes to pink.
8. Selecting Multiple Elements with the :nth-last-of-type(n) Selector
Similar to the :nth-last-child(n) selector, we can also use the :nth-last-of-type(n) selector to select multiple elements, for example, the third-to-last and fourth-to-last elements.
Example Code 15: Select the third-to-last and fourth-to-last h5 elements and set the text to italic
<!DOCTYPE html>
<html>
<head>
<style>
h5:nth-last-of-type(3), h5:nth-last-of-type(4) {
font-style: italic;
}
</style>
</head>
<body>
<h5>First h5 element</h5>
<h5>Second h5 element</h5>
<h5>Third h5 element</h5>
<h5>Fourth h5 element</h5>
<h5>Fifth h5 element</h5>
</body>
</html>
Output:
Result: The text in the third-to-last and fourth-to-last h5 elements becomes italic.
Example Code 16: Select the third-to-last and fifth-to-last span elements and set the font size to 14px
<!DOCTYPE html>
<html>
<head>
<style>
span:nth-last-of-type(3), span:nth-last-of-type(5) {
font-size: 14px;
}
</style>
</head>
<body>
<span>First span element</span>
<span>Second span element</span>
<span>Third span element</span>
<span>Fourth span element</span>
<span>Fifth span element</span>
</body>
</html>
Output:
Running result: The font size of the third-to-last and fifth-to-last span elements changes to 14px.
9. Conclusion
Through the introduction and sample code in this article, readers can learn how to use CSS selectors to select the second element on a page and how to select multiple elements for styling.