Get the nth element of the same type using JavaScript

avatar

Borislav Hadzhiev

Tue Dec 28 20212 min read

banner

Photo by Jamie Street

Get the nth element of the same type using JavaScript #

To get the nth element of the same type, pass the :nth-of-type() pseudo-class as a parameter to the querySelector method, e.g. document.querySelector('#parent li:nth-of-type(2)'). The pseudo class matches elements based on their position among siblings of the same type.

Here is the HTML for the examples in this article.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <ul id="parent"> <li class="item-1">First</li> <span>This element isn't counted</span> <li class="item-2">Second</li> <span>This element isn't counted</span> <li class="item-3">Third</li> </ul> <script src="index.js"></script> </body> </html>

And here is the related JavaScript code.

index.js
const secondLi = document.querySelector('#parent li:nth-of-type(2)'); console.log(secondLi); // ๐Ÿ‘‰๏ธ li.item-2 const thirdLi = document.querySelector('#parent li:nth-of-type(3)'); console.log(thirdLi); // ๐Ÿ‘‰๏ธ li.item-3 const oddLis = document.querySelectorAll('#parent li:nth-of-type(odd)'); console.log(oddLis); // ๐Ÿ‘‰๏ธ [li.item-1, li.item-3] const every2Lis = document.querySelectorAll('#parent li:nth-of-type(2n)'); console.log(every2Lis); // ๐Ÿ‘‰๏ธ [li.item-2]

The :nth-of-type() pseudo-class allows us to match elements based on their position among siblings of the same type (tag name).

The pseudo-class takes a single argument that describes which elements of the provided type should be matched.

Note that with :nth-of-type(), element indices are 1-based.

The first example selects the second li element that is a child of an element with an id of parent.

index.js
const secondLi = document.querySelector('#parent li:nth-of-type(2)');

This selector only considers li elements and would not match elements of any other type.

You can also pass different keyword values to the :nth-of-type() pseudo class, for example:

  • odd - matches the siblings of the same type whose numeric position is odd - 1, 3, 5, etc.
  • even - matches the siblings of the same type whose numeric position is even - 2, 4, 6, etc.
  • 3n - matches elements of the same type in position 3, 6, 9, 12, etc.

The following examples use document.querySelectorAll to select multiple elements using the :nth-of-type() pseudo class.

index.js
const evenLis = document.querySelectorAll('#parent li:nth-of-type(even)'); console.log(evenLis); // ๐Ÿ‘‰๏ธ [li.item-2] const oddLis = document.querySelectorAll('#parent li:nth-of-type(odd)'); console.log(oddLis); // ๐Ÿ‘‰๏ธ [li.item-1, li.item-3] const every2Lis = document.querySelectorAll('#parent li:nth-of-type(2n)'); console.log(every2Lis); // ๐Ÿ‘‰๏ธ [li.item-2]

The querySelectorAll method returns a NodeList containing the elements that satisfy the condition.

The first and second examples match the even an odd li elements that are children of an element with an id of parent.

The third example selects every 2 li elements, e.g. li elements at positions 2, 4, 6, 8, etc.

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee