jQuery :nth-of-type() Selector

Posted in jQuery Tutorial

Updated on Apr 28, 2024

By Mari Selvan

👁️ 6 - Views

⏳ 4 mins

💬 0

Photo Credit to CodeToFun

🙋 Introduction

jQuery offers a plethora of selectors to target specific elements in HTML documents. Among these, the :nth-of-type() selector stands out for its ability to select elements based on their position within a parent element. Understanding and utilizing this selector effectively can greatly enhance your ability to manipulate DOM elements dynamically.

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

🧠 Understanding :nth-of-type() Selector

The :nth-of-type() selector targets elements based on their position among siblings of the same type within their parent element. It allows you to select elements by specifying a numeric expression or a keyword like 'odd' or 'even'.

💡 Syntax

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

syntax.js

Copied

$("parentElementSelector > :nth-of-type(n)")

📝 Example

Selecting Every Second Paragraph:

Suppose you have a series of paragraphs within a container and you want to select every second paragraph to apply a different style. You can achieve this using the :nth-of-type() selector as follows:
index.html
Copied
```
<div id="container">
 Paragraph 1
 Paragraph 2
 Paragraph 3
 Paragraph 4
 Paragraph 5
</div>
```
example.js
Copied
```
$("#container > p:nth-of-type(2n)").css("color", "blue");
```
This will change the color of every second paragraph to blue.

Applying Styles to Odd and Even Table Rows:

You can also use the :nth-of-type() selector to style alternate rows of a table differently:

index.html

Copied

<table>
  <tr><td>Row 1</td></tr>
  <tr><td>Row 2</td></tr>
  <tr><td>Row 3</td></tr>
  <tr><td>Row 4</td></tr>
  <tr><td>Row 5</td></tr>
</table>

example.js

Copied

$("table tr:nth-of-type(odd)").css("background-color", "lightgray");
$("table tr:nth-of-type(even)").css("background-color", "lightblue");

This will set the background color of odd rows to light gray and even rows to light blue.

Targeting Specific Elements in Nested Structures:

You can use :nth-of-type() to target specific elements even within nested structures. For instance, let's target every third list item within unordered lists:
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-of-type(3n)").css("font-weight", "bold");
```
This will make every third list item within unordered lists bold.
Combining with Other Selectors:

You can combine the :nth-of-type() selector with other selectors to target elements more precisely. For example, you can target the third paragraph within a specific section:
example.js
Copied
```
$("#specificSection > p:nth-of-type(3)").addClass("highlight");
```

🎉 Conclusion

The jQuery :nth-of-type() selector is a versatile tool for selecting elements based on their position within their parent element. Whether you need to style alternate elements, target specific items within a list, or apply styles to elements based on their position, this selector offers a flexible solution.

By mastering its usage, you can efficiently manipulate DOM elements and create visually appealing web pages with ease.