How to Select the Last Second Element with CSS
In this snippet, you’ll find out how to select the last second element with pure CSS. To achieve the goal, you need to use the CSS :nth-last-child() pseudo-class.
Solution with the CSS :nth-last-child() pseudo-class
CSS has a :nth-last-child() pseudo-class, which is used to match elements based on their position in the group of siblings, and it counts from the end.
In the example below, we have some <div> elements within a <section> tag. To select the last second <div>, we use a single argument (2) with the :nth-last-child() pseudo-class and add a background to highlight it.
Example of selecting the last second <div> element:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
section >:nth-last-child(2) {
background: lightgreen;
}
</style>
</head>
<body>
<section>
<div>Line №1</div>
<div>Line №2</div>
<div>Line №3</div>
<div>Line №4</div>
</section>
</body>
</html>Result
<div class="demo px-2.5 mt-1 mb-5 not-prose">
<section> <div>Line №1</div> <div>Line №2</div> <div>Line №3</div> <div>Line №4</div> </section>
</div>
Let’s see another example, where we have a <table> and select the last second <tr> element of it.
Example of selecting the last second <tr> element:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
border: 1px solid purple;
}
table td {
padding: 5px 20px;
}
tbody > tr:nth-last-child(2) {
font-weight: 600;
color: purple;
font-style: italic;
font-size: 20px;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td>Line №1</td>
</tr>
<tr>
<td>Line №2</td>
</tr>
<tr>
<td>Line №3</td>
</tr>
<tr>
<td>Line №4</td>
</tr>
<tr>
<td>Line №5</td>
</tr>
</tbody>
</table>
</body>
</html>In the next example, we combine :nth-last-child() with other selectors to demonstrate more complex styling while still targeting the last second <tr>.
Example of selecting the last second <tr> element:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
border: 1px solid purple;
}
table td {
padding: 10px 30px;
}
/* Selects the last 3 elements */
tbody > tr:nth-last-child(-n+3) {
background-color: #a76db5;
}
/* Selects every element starting from the second item */
tbody > tr:nth-last-child(n+2) {
color: black;
text-transform: uppercase;
}
tbody > tr:nth-last-child(2) {
font-weight: 600;
color: white;
font-style: italic;
font-size: 20px;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td>Line №1</td>
</tr>
<tr>
<td>Line №2</td>
</tr>
<tr>
<td>Line №3</td>
</tr>
<tr>
<td>Line №4</td>
</tr>
<tr>
<td>Line №5</td>
</tr>
</tbody>
</table>
</body>
</html>Example of selecting the last second <li> element:
Example of selecting the last second <li> element:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
ul li {
padding: 5px;
}
ul li:nth-last-child(2) {
font-weight: bold;
color: coral;
font-size: 18px;
}
</style>
</head>
<body>
<ul>
<li>
Line №1
</li>
<li>
Line №2
</li>
<li>
Line №3
</li>
<li>
Line №4
</li>
</ul>
</body>
</html>Example of selecting the last second <span> element:
How to Select the Last Second Element with CSS
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
span {
display: block;
padding: 5px 15px;
}
span:nth-last-child(2) {
font-style: italic;
color: green;
font-size: 20px;
}
</style>
</head>
<body>
<p>
<span>
Line №1
</span>
<span>
Line №2
</span>
<span>
Line №3
</span>
<span>
Line №4
</span>
</p>
</body>
</html>Example of selecting the last second <p> element:
How to Select the Last Second Element with CSS
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
padding: 5px 15px;
}
p:nth-last-child(2) {
color: lightblue;
font-size: 18px;
}
</style>
</head>
<body>
<div>
<p>
Line №1
</p>
<p>
Line №2
</p>
<p>
Line №3
</p>
<p>
Line №4
</p>
</div>
</body>
</html>