:nth-of-type() Selector

Selects all elements that are the nth child of their parent in relation to siblings with the same element name.

.nth-of-type(index)

index Number/StringThe index of each child to match, starting with 1, the string even or odd, or an equation ( eg. :nth-of-type(even), :nth-of-type(4n) )

Because jQuery's implementation of :nth- selectors is strictly derived from the CSS specification, the value of n is "1-indexed", meaning that the counting starts at 1. For other selector expressions such as .first() or .eq() jQuery follows JavaScript's "0-indexed" counting.

Further discussion of this usage can be found in the W3C CSS specification.

Find each span that is second in relation to its sibling spans.

JS
<div>
  <span>John</span>, <b>Kim</b>, <span>Adam</span>, <b>Rafael</b>,
  <span>Oleg</span>
</div>
<div>
  <b>Dave</b>,
  <span>Ann</span>
</div>
<div>
  <i><span>Maurice</span></i
  >, <span>Richard</span>, <span>Ralph</span>,
  <span>Jason</span>
</div>
CSS
.nth {
  color: red;
}
HTML
$("span:nth-of-type(2)")
  .append("<span> is 2nd sibling span</span>")
  .addClass("nth");
DEMO

Looking for a Web Developer?

👋

Hi! I'm Basti, author of this site. If you are looking for a web developer with 15+ years of experience, holla at me!

Be it the good 'ol jQuery, vanilla JS or modern frameworks like Vue and Svelte, front- or backend, I can help you.

Just write me at jobs@jqapi.com :)