CSS selector last element

CSS Selector Last Element

CSS Selector Last Element

In front-end development, you often encounter situations where you need to adjust the style of the last element on the page. This is where you need to use CSS selectors to target the last element for styling. In CSS, there are several ways to select the last element. Below are some common selectors and their usage.

1. :last-child Pseudo-Class Selector

The :last-child pseudo-class selector selects the last child of an element’s parent. This selector selects the last child of a parent element, and its position is arbitrary, not directly related to the element’s tag.


The sample code is as follows:

<!DOCTYPE html> 
<html> 
<head> 
<title>Last Child Selector Demo</title> 
<style> 
div p:last-child { 
color: red; 
} 
</style> 
</head> 
<body> 

<div> 
<p>This is the first paragraph.</p> 
<p>This is the second paragraph.</p> 
<p>This is the last paragraph.</p> 
</div> 

</body> 
</html> 

In the example code above, we use the :last-child selector to select the last p element within a div element and set its color to red. This will result in the last p element being colored red.

2. :nth-last-child() Pseudo-Class Selector

The :nth-last-child() pseudo-class selector selects the nth-to-last child element of a parent element. In other words, it can directly target the last child element. The usage is as follows:

<!DOCTYPE html> 
<html> 
<head> 
<title>Nth Last Child Selector Demo</title> 
<style> 
div p:nth-last-child(2) { 
font-weight: bold; 
} 
</style> 
</head> 
<body> 

<div> 
<p>This is the first paragraph.</p> 
<p>This is the second to last paragraph.</p> 
<p>This is the last paragraph.</p> 
</div> 

</body> 
</html> 

In the above example code, we use the :nth-last-child(2) selector to select the second-to-last p element under the div element and make its text bold. In this way, the text of the second-to-last p element will become bold.

3. :last-of-type Pseudo-Class Selector

The :last-of-type pseudo-class selector selects the last child element of a specified type under a parent element. For example, if we want to select the last paragraph element under a parent element, we can use the :last-of-type selector.

The sample code is as follows:

<!DOCTYPE html>
<html>
<head>
<title>Last of Type Selector Demo</title>
<style>
div p:last-of-type {
text-decoration: underline;
}

</style>

</head>
<body>

<div>
<p>This is the first paragraph.</p>

<span>This is not selected.</span>
<p>This is the last paragraph.</p>

</div>

</body>

</html>

In the example code above, we use the :last-of-type selector to select the last p element within a div element and underline it. This way, the text within the last p element will be underlined.

Summary

Through the above introduction, we can see that there are multiple ways to select the last element in CSS. We can choose the appropriate selector to implement style settings based on the actual situation. In actual front-end development, flexible use of these selectors will make page styling more convenient and efficient.

Leave a Reply

Your email address will not be published. Required fields are marked *