CSS last child
CSS Last Child Element
In web development, sometimes we need to perform special styling on the last child element, such as adding a specific style to the last list item or adding a bottom border to the last paragraph. This article explains how to use CSS to select and style the last child element.
1. Using the :last-child Pseudo-Class Selector
The :last-child pseudo-class selector selects the last child element of an element. Here’s a simple example where we’ll add a bottom border to the last paragraph:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Last Child Example</title>
<style>
p:last-child {
border-bottom: 1px solid black;
}
</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 above example, the last paragraph will display a black bottom border.
2. Use the :nth-last-child pseudo-class selector
:nth-last-child pseudo-class selector selects the nth-last child element. Here is an example where we will add specific styles to the second-to-last paragraph:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Nth Last Child Example</title>
<style>
p:nth-last-child(2) {
color: red;
}
</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 the example above, the second-to-last paragraph will appear in red.
3. Dynamically Add Styles Using JavaScript
Sometimes we need to dynamically select the last child element based on the page content and add styles. Here’s an example of using JavaScript to add specific styles to the last list item:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dynamic Last Child Example</title>
<style>
.last-item {
font-weight: bold;
}
</style>
</head>
<body>
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
const list = document.getElementById('list');
const lastItem = list.lastElementChild;
lastItem.classList.add('last-item');
</script>
</body>
</html>
Output:
In the above example, the last list item is displayed in bold.
4. Using CSS Variables
We can also use CSS variables to style the last child element. Here’s an example where we’ll add a specific background color to the last paragraph:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Variables Example</title>
<style>
:root {
--last-child-bg: lightblue;
}
p:last-child {
background-color: var(--last-child-bg);
}
</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 above example, the last paragraph will display a light blue background.
5. Use the :not selector to exclude other elements
Sometimes we need to select elements other than the last child and apply styles to them. In this case, we can use the :not selector to exclude the last child. Here’s an example where we’ll add specific styles to all but the last paragraph:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Not Selector Example</title>
<style>
p:not(:last-child) {
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. </p>
</body>
</html>
Output:
In the above example, all paragraphs except the last one will be displayed in green.
6. Using the :nth-child Selector in Combination with :last-child
We can also combine the :nth-child and :last-child selectors to select child elements at a specific position. Here is an example where we will add specific styles to the second to last paragraph:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Nth Child and Last Child Example</title>
<style>
p:nth-last-child(2):last-child {
text-decoration: underline;
}
</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 the example above, the second-to-last paragraph will appear as underlined text.
7. Use the :only-child Selector
The :only-child selector selects elements that have only one child. Here’s an example where we’ll add specific styles to a div with only one child:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Only Child Example</title>
<style>
div:only-child {
background-color: lightgray;
}
</style>
</head>
<body>
<div>
<p>This is the only child element. </p>
</div>
</body>
</html>
Output:
In the example above, a div with only one child will display a light gray background.
8. Using the :last-of-type Selector
The :last-of-type selector selects the last element of a certain type. Here’s an example where we’ll add specific styles to 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-style: italic;
}
</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 above example, the last paragraph will be italicized.
9. Using the :nth-last-of-type Selector
The :nth-last-of-type selector selects the nth-last element of a certain type. Here is an example where we will add specific styles to the second to last paragraph:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Nth Last of Type Example</title>
<style>
p:nth-last-of-type(2) {
text-transform: uppercase;
}
</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 the example above, the second-to-last paragraph will be capitalized.
10. Excluding the Last Element Using the :not(:last-of-type) Selector
We can also use the :not(:last-of-type) selector to exclude the last element and apply styles to other elements. Here’s an example where we’ll add specific styles to all but the last paragraph:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Not Last of Type Example</title>
<style>
p:not(:last-of-type) {
color: purple;
}
</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, all paragraphs except the last one will appear purple.
Through this article, you learned how to use CSS to select and style the last child element. These techniques can help you better control the styling of page elements, making your pages look more beautiful and professional.