jQuery :last-of-type Selector

Posted in jQuery Tutorial

Updated on Apr 27, 2024

By Mari Selvan

👁️ 12 - Views

⏳ 4 mins

💬 0

Photo Credit to CodeToFun

🙋 Introduction

jQuery offers a wide range of selectors to target specific elements within a webpage, allowing developers to manipulate and interact with them dynamically. One such selector is the :last-of-type, which enables you to select the last element of a particular type within its parent. Understanding how to utilize this selector effectively can greatly enhance your ability to style and manipulate elements on your webpage.

In this guide, we'll delve into the usage of the jQuery :last-of-type selector with clear examples to help you grasp its functionality.

🧠 Understanding :last-of-type Selector

The :last-of-type selector is used to target the last element of a specific type within its parent. This can be particularly useful when you want to apply styles or perform actions on the last occurrence of an element, such as the last paragraph or the last list item.

💡 Syntax

The syntax for the :last-of-type selector is straightforward:

syntax.js

Copied

$("parent_element:last-of-type")

📝 Example

Selecting the Last Paragraph:

Suppose you have a div containing multiple paragraphs, and you want to select and style the last paragraph differently. You can achieve this using the :last-of-type selector as follows:
index.html
Copied
```
<div id="content">
  <p>First paragraph</p>
  <p>Second paragraph</p>
  <p>Last paragraph</p>
</div>
```
example.js
Copied
```
$("#content p:last-of-type").css("font-weight", "bold");
```
This will make the last paragraph within the #content div appear bold.
Targeting the Last List Item:

Consider a scenario where you have an unordered list, and you want to style the last list item differently from the rest. You can use the :last-of-type selector in combination with the list element type (li) to achieve this:
index.html
Copied
```
<ul id="list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Last item</li>
</ul>
```
example.js
Copied
```
$("#list li:last-of-type").css("color", "red");
```
This will change the text color of the last list item to red.
Applying Styles to the Last Div:

You can also target the last occurrence of a specific type of element, such as a div, within its parent container:
index.html
Copied
```
<div class="container">
  <div>First div</div>
  <div>Last div</div>
</div>
```
example.js
Copied
```
$(".container div:last-of-type").css("border", "2px solid blue");
```
This will add a blue border to the last div within the .container.

🎉 Conclusion

The jQuery :last-of-type selector provides a convenient way to target and manipulate the last occurrence of a specific type of element within its parent. Whether you need to style elements differently, apply actions, or dynamically modify content, this selector offers a flexible solution.

By mastering its usage, you can add finesse and versatility to your web development projects effortlessly.