CSS last element
CSS Last Element
In web development, sometimes we need to perform special styling on the last element, such as adding a bottom border to the last paragraph or changing the background color of the last list item. This article will explain how to use CSS selectors to select the last element and perform styling on it.
1. Using the :last-child pseudo-class selector
:last-child The pseudo-class selector can select the last child of an element. Here’s a simple example where we set the text color of the last paragraph to red:
<!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 this example, the text color of the last paragraph is set to red.
2. Use the :nth-last-child pseudo-class selector
:nth-last-child() The pseudo-class selector selects the last nth child of an element. Here is an example where we set the background color of the second-to-last paragraph to gray:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Nth Last Child Example</title>
<style>
p:nth-last-child(2) {
background-color: lightgrey;
}
</style>
</head>
<body>
<p>This is the first paragraph. </p>
<p>This is the second-to-last paragraph. </p>
<p>This is the last paragraph. </p>
</body>
</html>
Output:
In this example, the background color of the second-to-last paragraph is set to gray.
3. Use the :last-of-type pseudo-class selector
:last-of-type The pseudo-class selector selects the last child of an element of a specific type. Here’s an example where we bold the text in the last paragraph:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Last Of Type Example</title>
<style>
p:last-of-type {
font-weight: bold;
}
</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 this example, the text of the last paragraph is bolded.
4. Using the :nth-last-of-type Pseudo-Class Selector
:nth-last-of-type() The :nth-last-of-type() pseudo-class selector selects the last nth child of an element. Here is an example where we set the text color of the second-to-last paragraph to blue:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Nth Last Of Type Example</title>
<style>
p:nth-last-of-type(2) {
color: blue;
}
</style>
</head>
<body>
<p>This is the first paragraph. </p>
<p>This is the second-to-last paragraph. </p>
<p>This is the last paragraph. </p>
</body>
</html>
Output:
In this example, the text color of the second-to-last paragraph is set to blue.
5. Selecting the Last Element with JavaScript
In addition to using CSS selectors, we can also use JavaScript to select the last element and style it. Here’s an example where we set the text size of the last paragraph to 20px:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript Example</title>
<style>
p {
font-size: 16px;
}
</style>
</head>
<body>
<p>This is the first paragraph. </p>
<p>This is the second paragraph. </p>
<p>This is the last paragraph. </p>
<script>
var paragraphs = document.querySelectorAll('p');
var lastParagraph = paragraphs[paragraphs.length - 1];
lastParagraph.style.fontSize = '20px';
</script>
</body>
</html>
Output:
In this example, the text size of the last paragraph is set to 20px.
6. Select the Last Element with jQuery
If you’re using the jQuery library, you can also easily select the last element and style it. Here’s an example where we set the background color of the last paragraph to yellow:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Example</title>
<script src="https://code. href="https://geek-docs.com/jquery/jquery-top-tutorials/1001100_jquery-index.html" rel="noopener" target="_blank" title="jQuery Tutorial">jquery.com/jquery-3.6.0.min.js"></script>
<style>
p {
padding: 10px;
margin: 10px;
background-color: lightblue;
}
</style>
</head>
<body>
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
<p>This is the last paragraph. </p>
<script>
$('p:last').css('background-color', 'yellow');
</script>
</body>
</html>
In this example, the background color of the last paragraph is set to yellow.
7. Use CSS Selectors to Select the Children of the Last Element
In addition to selecting the last element, sometimes we also need to select the children of the last element for styling. Here’s an example where we set the text color of the span element in the last paragraph to green:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Last Child Element Example</title>
<style>
p:last-child span {
color: green;
}
</style>
</head>
<body>
<p>This is the first paragraph. </p>
<p>This is the second paragraph. </p>
<p>This is the last paragraph. <span>This is the span element. </span></p>
</body>
</html>
Output:
In this example, the text color of the span element in the last paragraph is set to green.
8. Using CSS Selectors to Select Specific Children of the Last Element
Sometimes we need to select specific types of children of the last element for styling. Here’s an example where we bold the text of the last span element in the last paragraph:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Last Child Of Type Example</title>
<style>
p:last-child span:last-of-type {
font-weight: bold;
}
</style>
</head>
<body>
<p>This is the first paragraph. </p>
<p>This is the second paragraph. </p>
<p>This is the last paragraph. <span>This is the first span element. </span><span>This is the last span element. </span></p>
</body>
</html>
Output:
In this example, the text of the last span element in the last paragraph is bolded.
9. Use CSS Selectors to Select the Immediate Children of the Last Element
Sometimes, we only want to style the immediate children of the last element. We can use the child selector >. Here’s an example where we set the text color of the last paragraph’s direct child elements to orange:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Last Child Direct Child Example</title>
<style>
p:last-child > span {
color: orange;
}
</style>
</head>
<body>
<p>This is the first paragraph. </p>
<p>This is the second paragraph. </p>
<p>This is the last paragraph, and <span>This is the direct child span element. </span></p>
</body>
</html>
Output:
In this example, the text color of the direct children of the last paragraph is set to orange.
10. Selecting the Siblings of the Last Element Using CSS Selectors
Sometimes we need to select the siblings of the last element for styling. We can use the sibling selector ~. Here’s an example where we set the text size of the last paragraph’s sibling elements to 18px:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Last Child Sibling Example</title>
<style>
p:last-child ~ p {
font-size: 18px;
}
</style>
</head>
<body>
This is the first paragraph.
This is the second paragraph.
This is the last paragraph.
This is the last paragraph's sibling element.
</body>
</html>
Output:
In this example, the text size of the last paragraph’s sibling elements is set to 18px.
Through the above examples, we can see how to use different CSS selectors to select and style the last element. Whether you use pseudo-class selectors, JavaScript, jQuery, or different types of child selectors, you can easily style the final element.