jQuery :nth-last-of-type() Selector

Posted in jQuery Tutorial

Updated on Apr 28, 2024

By Mari Selvan

👁️ 8 - Views

⏳ 4 mins

💬 0

Photo Credit to CodeToFun

🙋 Introduction

jQuery offers a wide array of selectors that empower developers to target specific elements in HTML documents with ease. One such selector is the :nth-last-of-type() selector, which allows you to target elements based on their position relative to the end of their parent container. Understanding and leveraging this selector can significantly enhance your ability to manipulate and style elements dynamically.

In this comprehensive guide, we'll explore the usage of the jQuery :nth-last-of-type() selector with clear examples to help you grasp its full potential.

🧠 Understanding :nth-last-of-type() Selector

The :nth-last-of-type() selector targets elements based on their position relative to the end of their parent container. It is particularly useful when you need to select elements dynamically based on their order within a container, counting from the last element backwards.

💡 Syntax

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

syntax.js

Copied

$("selector:nth-last-of-type(n)")

📝 Example

Selecting the Second-to-Last Paragraph:

Suppose you have a series of paragraphs within a container, and you want to select the second-to-last paragraph. You can achieve this using the :nth-last-of-type() selector as follows:
index.html
Copied
```
<div class="container">
  <p>First paragraph</p>
  <p>Second paragraph</p>
  <p>Third paragraph</p>
</div>
```
example.js
Copied
```
$(".container p:nth-last-of-type(2)").css("color", "blue");
```
This will set the text color of the second-to-last paragraph to blue.
Styling Alternating List Items from the End:

You can also style list items alternately starting from the end of the list. For example, let's set different background colors for every other list item from the end:
index.html
Copied
```
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>
```
example.js
Copied
```
$("ul li:nth-last-of-type(odd)").css("background-color", "lightgrey");
```
This will set the background color of the second, fourth, and so on, list items from the end to light grey.
Applying Styles to the Last Three Elements:

You can target the last three elements of a specific type within a container and apply styles to them. For instance:
index.html
Copied
```
<div class="container">
  <span>Element 1</span>
  <span>Element 2</span>
  <span>Element 3</span>
  <span>Element 4</span>
  <span>Element 5</span>
</div>
```
example.js
Copied
```
$(".container span:nth-last-of-type(-n+3)").css("font-weight", "bold");
```
This will make the text of the last three <span> elements within the .container div bold.
Combining with Other Selectors:

The :nth-last-of-type() selector can be combined with other selectors for more specific targeting. Experiment with various combinations to achieve the desired results efficiently.

🎉 Conclusion

The jQuery :nth-last-of-type() selector is a powerful tool for targeting elements based on their position relative to the end of their parent container. Whether you need to select specific elements dynamically, style elements alternately, or apply styles to elements near the end of a container, this selector offers a flexible solution.

By mastering its usage, you can enhance the interactivity and visual appeal of your web pages effortlessly.