CSS select last element
Selecting the Last Element with CSS
In CSS, we often need to select specific positions of elements, such as the first or last element. This article will focus on how to use CSS selectors to select the last element.
1. Using the :nth-last-child Selector
The :nth-last-child selector selects the nth-to-last child of a parent element. We can use :nth-last-child to select the last element.
The sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, </body>
</html>
Output:
In the example above, we use the :nth-last-child selector to select the last div element and set its text color to red.
2. Use the :last-child selector
The :last-child selector selects the last child of a parent element. We can use :last-child to select the last element.
Sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Select Last Element</title>
<style>
div:last-child {
font-weight: bold;
}
</style>
</head>
<body>
<div>First Element</div>
<div>Second Element</div>
<div>Third Element</div>
<div>Last Element</div>
</body>
</html>
Output:
In the example above, we use the :last-child selector to select the last div element and set its text to bold.
3. Using the :nth-child Selector
The :nth-child selector selects the nth child of a parent element. We can use :nth-child to select the last element.
The sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Select the Last Element</title>
<style>
div:nth-child(4) {
text-decoration: underline;
}
</style>
</head>
<body>
<div>First Element</div>
<div>Second Element</div>
<div>Third Element</div>
<div>Last Element</div>
</body>
</html>
Output:
In the example above, we use the :nth-child selector to select the fourth div element and underline its text.
4. Using the :last-of-type selector
The :last-of-type selector selects the last child element of a specified type within a parent element. We can use :last-of-type to select the last element.
Sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Select Last Element</title>
<style>
div:last-of-type {
background-color: lightblue;
}
</style>
</head>
<body>
<div>First Element</div>
<p>Second Element</p>
<div>Third Element</div>
<div>Last Element</div>
</body>
</html>
Output:
In the example above, we use the :last-of-type selector to select the last div element and set its background color to light blue.
5. Using the :nth-last-of-type Selector
The :nth-last-of-type selector selects the nth-to-last child element of a specified type within a parent element. We can use :nth-last-of-type to select the last element.
The sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Select the Last Element</title>
<style>
div:nth-last-of-type(1) {
color: green;
}
</style>
</head>
<body>
<div>First Element</div>
<p>Second Element</p>
<div>Third Element</div>
<div>Last Element</div>
</body>
</html>
Output:
In the example above, we use the :nth-last-of-type selector to select the first-to-last div element and set its text color to green.
6. Select the Last Element with JavaScript
In addition to CSS selectors, we can also use JavaScript to select the last element. Here’s an example code to select the last element using JavaScript:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Select Last Element</title>
<style>
div {
font-size: 20px;
}
</style>
</head>
<body>
<div>First Element</div>
<div>Second Element</div>
<div>Third Element</div>
<div>Last Element</div>
<script>
const divs = document.querySelectorAll('div');
const lastDiv = divs[divs.length - 1];
lastDiv.style.color = 'purple';
</script>
</body>
</html>
Output:
In the example above, we use JavaScript to select the last div element and set its text color to purple.
7. Select the Last Element Using jQuery
If you use jQuery in your project, you can also use jQuery to select the last element. Here’s an example code to select the last element using jQuery:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Selecting the Last Element with CSS</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
div {
font-size: 20px;
}
</style>
</head>
<body>
<div>first element</div>
<div>second element</div>
<div>third element</div>
<div>last element</div>
<script>
<span class="katex math inline">(document).ready(function(){</span>('div:last').css('background-color', 'yellow');
});
</script>
</body>
</html>
Output:
In the above example, we use jQuery to select the last div element and set its background color to yellow.
8. Using CSS Pseudo-Classes to Select the Last Element
In addition to the above methods, we can also use CSS pseudo-classes to select the last element. Here is an example code to select the last element using CSS pseudo-class:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Select the Last Element</title>
<style>
div:nth-last-of-type(1) {
font-style: italic;
}
</style>
</head>
<body>
<div>First Element</div>
<div>Second Element</div>
<div>Third Element</div>
<div>Last Element</div>
</body>
</html>
Output:
In the above example, we use the CSS pseudo-class :nth-last-of-type(1) to select the last div element and set its text to italic.
9. Select the Child of the Last Element Using CSS Selectors
Sometimes we need to select the last child element of a parent element instead of selecting the last element directly. Here’s a sample code demonstrating how to use CSS selectors to select the last child of an element:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Select the Last Element</title>
<style>
div:last-child span {
color: blue;
}
</style>
</head>
<body>
<div>
<span>Child 1</span>
<span>Child 2</span>
</div>
<div>
<span>Child 3</span>
<span>Child 4</span>
</div>
</body>
</html>
Output:
In the example above, we used the div:last-child span selector to select the last span child element within each div element and set its text color to blue.
10. Using CSS Selectors to Select the Last Element with a Specific Class
Sometimes we need to select the last child element of a parent element that has a specific class. Here’s a sample code demonstrating how to use CSS selectors to select the last child element with a specific class:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Select the Last Element</title>
<style>
div:last-child .special {
font-weight: bold;
}
</style>
</head>
<body>
<div>
<span>Normal Element</span>
<span class="special">Special Element 1</span>
</div>
<div>
<span>Normal Element</span>
<span class="special">Special Element 2</span>
</div>
</body>
</html>
Output:
In the example above, we use the div:last-child .special selector to select the last span element with the class special within each div element and set its text to bold.