Get the nth child of an Element using JavaScript

# Table of Contents

# Get the nth child of an Element using JavaScript

Use the querySelector() method to get the nth child of an element.

The :nth-child pseudo-class returns the element that matches the provided position.

Here is the HTML for the examples.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>bobbyhadz.com</title>
  </head>

  <body>
    <div id="parent">
      <div class="child1">Child 1</div>
      <div class="child2">Child 2</div>
      <div class="child3">Child 3</div>
    </div>

    <script src="index.js"></script>
  </body>
</html>

And here is the related JavaScript code.

index.js

Copied!
const third = document.querySelector('#parent :nth-child(3)');
console.log(third); // 👉️ div.child3

const odd = document.querySelectorAll('#parent :nth-child(odd)');
console.log(odd); // 👉️ [div.child1, div.child3]

The first example uses the document.querySelector() method and the :nth-child() pseudo-class to select the third child of an element with an id of parent.

The :nth-child() pseudo-class takes a single argument that describes which elements should be matched.

Note that element indices are 1-based when using :nth-child().

You can narrow things down by only matching an element of a specific type, e.g. the second positioned div element.

index.js

Copied!
const second = document.querySelector('#parent div:nth-child(2)');
console.log(second); // 👉️ div.child3

This selector would only match the second div element in the group of siblings.

# Get the nth child of an Element using NodeList.item

An alternative approach is to get a NodeList containing the children and use the NodeList.item method to get a node from the list by index.

index.js

Copied!
const children = document.getElementById('parent').children;
console.log(children); // 👉️ [div.child1, div.child2, div.child3]

const firstChild = children.item(0);
console.log(firstChild); // 👉️ div.child1

We accessed the children property on the parent and got a NodeList containing the children of the element.

This allows us to use the item() method, to which we can pass the zero-based index of the element we want to select.

The item() method returns a node from a NodeList by index. If the index is out of range, a null value is returned.

Using the item method is more intuitive, however, the :nth-child() pseudo-class takes different keyword values, which makes it more flexible:

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

# Get every nth child of an Element using querySelectorAll

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

index.js

Copied!
const even = document.querySelectorAll('#parent :nth-child(even)');
console.log(even); // 👉️ [div.child2]

const odd = document.querySelectorAll('#parent :nth-child(odd)');
console.log(odd); // 👉️ [div.child1, div.child3]

const every2 = document.querySelectorAll('#parent :nth-child(2n)');
console.log(every2); // 👉️ [div.child2]

The third example selects every 2 elements, e.g. elements in positions 2, 4, 6, etc.

Note that indexes are 1-based when using :nth-child() and zero-based when using the item() method.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Get the nth child of an Element using JavaScript

# Table of Contents