CSS pseudo-class selects the last
CSS Pseudo-Class Selecting the Last
In CSS, pseudo-classes are special selectors used to select elements. The :last-child pseudo-class selector is used to select the last child of an element. This is very useful when designing web page layouts, allowing us to more precisely control and style page elements.
1. Selecting the Last Element
First, let’s look at a simple example of how to use the :last-child pseudo-class to select the last element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Last Child Example</title>
<style>
p:last-child {
color: red;
}
</style>
</head>
<body>
<p>This is the first paragraph. </p>
<p>This is the second paragraph. </p>
<p>This is the last paragraph. </p>
</body>
</html>
Output:
In the example above, we use the :last-child pseudo-class to select the last <p> element and set its text color to red. This will cause the last paragraph to appear in red.
2. Selecting the Last Element of a Specific Type
In addition to selecting the last element, we can also select the last element of a specific type. The following example selects the last <div> element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Last Div Example</title>
<style>
div:last-child {
background-color: lightblue;
}
</style>
</head>
<body>
<div>This is the first div. </div>
<div>This is the second div. </div>
<div>This is the last div. </div>
</body>
</html>
Output:
In this example, we use the :last-child pseudo-class to select the last <div> element and set its background color to light blue.
3. Select the last element with a specific class name
In addition to selecting the last element of a specific type, we can also select the last element with a specific class name. The following example selects the last element with the class name special.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Last Special Element Example</title>
<style>
.special:last-child {
font-weight: bold;
}
</style>
</head>
<body>
<p class="special">This is the first special paragraph. </p>
<p>This is the second normal paragraph. </p>
<p class="special">This is the last special paragraph. </p>
</body>
</html>
Output:
In this example, we use the .special:last-child selector to select the last element with the class name special and set its text to bold.
4. Select the Last Element with a Specific ID
In addition to selecting the last element with a specific class name, we can also select the last element with a specific ID. The following example selects the last element with the ID unique.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Last Unique Element Example</title>
<style>
#unique:last-child {
color: green;
}
</style>
</head>
<body>
<p id="unique">This is the first unique paragraph. </p>
<p>This is the second normal paragraph. </p>
<p id="unique">This is the last unique paragraph. </p>
</body>
</html>
Output:
In this example, we use the #unique:last-child selector to select the last element with the ID unique and set its text color to green.
5. Selecting the Last Child
In addition to selecting the last element, we can also select the last child. The following example selects the last child.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Last Child Element Example</title>
<style>
div > p:last-child {
text-decoration: underline;
}
</style>
</head>
<body>
<div>
<p>This is the first child paragraph. </p>
<p>This is the second child paragraph. </p>
<p>This is the last child paragraph. </p>
</div>
</body>
</html>
Output:
In this example, we use the div>p:last-child selector to select the last child element and underline its text.
6. Selecting a Specific Position of the Last Element
In addition to selecting the last element, we can also select a specific position within the last element. The following example selects the second-to-last element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Second Last Element Example</title>
<style>
p:nth-last-child(2) {
font-style: italic;
}
</style>
</head>
<body>
<p>This is the first paragraph. </p>
<p>This is the second paragraph. </p>
<p>This is the second-to-last paragraph. </p>
</body>
</html>
Output:
In this example, we use the p:nth-last-child(2) selector to select the second-to-last <p> element and set its text to italic.
7. Select the last element in odd position
In addition to selecting the last element, we can also select the last element in odd position. The following is an example to select the last element in odd position.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Odd Last Element Example</title>
<style>
p:nth-last-child(odd) {
background-color: lightyellow;
}
</style>
</head>
<body>
<p>This is the first paragraph. </p>
<p>This is the second paragraph. </p>
<p>This is the last odd-numbered paragraph. </p>
</body>
</html>
Output:
In this example, we use the p:nth-last-child(odd) selector to select the last odd-numbered <p> element and set its background color to light yellow.
8. Select the Last Even-Numbered Element
In addition to selecting the last element, we can also select the last even-numbered element. The following example selects the last even-numbered element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Even Last Element Example</title>
<style>
p:nth-last-child(even) {
color: purple;
}
</style>
</head>
<body>
<p>This is the first paragraph. </p>
<p>This is the second paragraph. </p>
<p>This is the last even-numbered paragraph. </p>
</body>
</html>
Output:
In this example, we use the p:nth-last-child(even) selector to select the last even-numbered <p> element and set its text color to purple.
9. Selecting a Specific Range of Last Elements
In addition to selecting the last element## 10. Selecting a Specific Range of Last Elements
In addition to selecting the last element, we can also select a specific range of last elements. The following example selects the second-to-last to the first-to-last elements.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Range Last Element Example</title>
<style>
p:nth-last-child(-n+2) {
border: 1px solid black;
}
</style>
</head>
<body>
<p>This is the first paragraph. </p>
<p>This is the second paragraph. </p>
<p>This is the second-to-last paragraph. </p>
<p>This is the last paragraph. </p>
</body>
</html>
Output:
In this example, we use the p:nth-last-child(-n+2) selector to select the second-to-last through the first-to-last <p> elements and add a black border to them.
11. Selecting a Specific Range of Last Elements
In addition to selecting the last element, we can also select a specific range of last elements. The following example selects the third-to-last through the first-to-last elements.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Range Last Element Example</title>
<style>
p:nth-last-child(-n+3) {
background-color: lightgreen;
}
</style>
</head>
<body>
<p>This is the first paragraph. </p>
<p>This is the second paragraph. </p>
<p>This is the third-to-last paragraph. </p>
<p>This is the second-to-last paragraph. </p>
<p>This is the last paragraph. </p>
</body>
</html>
Output:
In this example, we use the p:nth-last-child(-n+3) selector to select the third to the last <p> elements and set their background color to light green.
12. Selecting a Specific Range of Last Elements
In addition to selecting the last element, we can also select a specific range of last elements. The following example selects the fourth to the second to last elements.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Range Last Element Example</title>
<style>
p:nth-last-child(-n+4):nth-last-child(n+2) {
font-size: 20px;
}
</style>
</head>
<body>
<p>This is the first paragraph. </p>
<p>This is the second paragraph. </p>
<p>This is the fourth to last paragraph. </p>
<p>This is the third to last paragraph. </p>
<p>This is the second to last paragraph. </p>
<p>This is the last paragraph. </p>
</body>
</html>
Output:
In this example, we use the p:nth-last-child(-n+4):nth-last-child(n+2) selector to select the 4th to 2nd last <p> elements and set their font size to 20 pixels.
13. Selecting a Specific Range of the Last Element
In addition to selecting the last element, we can also select a specific range of the last elements. Here’s an example that selects the odd-numbered positions between the second-to-last and the first-to-last elements.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Range Odd Last Element Example</title>
<style>
p:nth-last-child(-n+2):nth-last-child(odd) {
color: orange;
}
</style>
</head>
<body>
<p>This is the first paragraph. </p>
<p>This is the second paragraph. </p>
<p>This is the second-to-last paragraph. </p>
<p>This is the last paragraph. </p>
</body>
</html>
Output:
In this example, we use the p:nth-last-child(-n+2):nth-last-child(odd) selector to select the odd-numbered <p> elements between the second-to-last and the first-to-last elements and set their text color to orange.
14. Selecting a Specific Range of Last Elements
In addition to selecting the last element, we can also select a specific range of last elements. Here’s an example that selects the even positions of the elements from the third to last.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Range Even Last Element Example</title>
<style>
p:nth-last-child(-n+3):nth-last-child(even) {
text-transform: uppercase;
}
</style>
</head>
<body>
<p>This is the first paragraph. </p>
<p>This is the second paragraph. </p>
<p>This is the third to last paragraph. </p>
<p>This is the second to last paragraph. </p>
<p>This is the last paragraph. </p>
</body>
</html>
Output:
In this example, we use the p:nth-last-child(-n+3):nth-last-child(even) selector to select the even-numbered <p> elements between the third-to-last and the first-to-last, and convert their text to uppercase.
15. Selecting a Specific Range of Last Elements
In addition to selecting the last element, we can also select a specific range of last elements. Here’s an example that selects the specific position of the fourth to the second-to-last element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Range Specific Last Element Example</title>
<style>
p:nth-last-child(-n+4):nth-last-child(n+2) {
font-weight: bold;
}
</style>
</head>
<body>
<p>This is the first paragraph. </p>
<p>This is the second paragraph. </p>
<p>This is the fourth-to-last paragraph. </p>
<p>This is the third-to-last paragraph. </p>
<p>This is the second-to-last paragraph. </p>
<p>This is the last paragraph. </p>
</body>
</html>
Output:
In this example, we use the p:nth-last-child(-n+4):nth-last-child(n+2) selector to select the fourth to the second-to-last elements and set their text to bold.
Conclusion
Through this article, we learned how to use the CSS :last-child pseudo-class selector to select the last element, and how to combine it with other selectors to select a specific position or range of the last element. These techniques can help us better control the style and layout of page elements, improving the flexibility and aesthetics of web design.