Home >>jQuery Tutorial >jQuery :nth-of-type() Selector
jQuery :nth-of-type(n) selector in jQuery is used to selects all elements that are the nth child, of a particular type, of their parent.
Syntax::nth-of-type(n|even|odd|formula)
Parameter | Description |
---|---|
n | It must be a number which has the first element has the index number 1. |
even | It is used to selects each even child element |
odd | It is used to selects each odd child element |
formula | It is used to specifies which child element(s) to be selected with a formula (an + b). |
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p:nth-of-type(3)").css("background-color", "orange");
});
</script>
</head>
<body>
<h1>This is phptpoint</h1>
<p>The first paragraph in body.</p>
<p>The second paragraph in body.</p>
<div style="border:1px solid;">
<span>This is a span element in div</span>
<p>The first paragraph in div.</p>
<p>The second paragraph in div.</p>
<p>The last (third) paragraph in div.</p>
</div><br>
<div style="border:1px solid;">
<p>The first paragraph in div.</p>
<p>The second paragraph in div.</p>
<p>The last (third) paragraph in div.</p>
</div>
<p>The last (third) paragraph in body.</p>
</body>
</html>
The first paragraph in body.
The second paragraph in body.
The first paragraph in div.
The second paragraph in div.
The last (third) paragraph in div.
The first paragraph in div.
The second paragraph in div.
The last (third) paragraph in div.
The last (third) paragraph in body.