Skip to main content

How to Get the Nth Child of an Element in JavaScript

Selecting a child element based on its position within a parent is a common task in DOM manipulation. You might need to get the first list item, highlight every odd row in a table, or select the third <div> in a container. The modern and most powerful way to do this is with CSS pseudo-classes.

This guide will teach you how to use querySelector() and querySelectorAll() with the :nth-child() pseudo-class to select elements by their position. We will also cover how to get an element by its index from the .children collection.

The querySelector() and querySelectorAll() methods are the definitive tools for selecting DOM elements. When combined with the :nth-child() pseudo-class, they provide a powerful and declarative way to select elements based on their order among siblings.

note

Important: The :nth-child() selector is 1-based, not 0-based. The first child is at position 1.

This is the HTML for examples in the next sections below:

<div id="parent">
  <div>Child 1</div>
  <div>Child 2</div>
  <div>Child 3</div>
  <div>Child 4</div>
</div>

How to Get a Single Nth Child​

To get a single child at a specific position, use querySelector() with :nth-child(n).

For example, you want to select the third <div> inside the parent container.

const parent = document.getElementById('parent');

// Select the 3rd child element inside the #parent container.
const thirdChild = parent.querySelector(':nth-child(3)');

console.log(thirdChild.textContent); 
// Output: "Child 3"

You can also be more specific by combining it with a tag name:

const secondDivChild = parent.querySelector('div:nth-child(2)');
console.log(secondDivChild.textContent); 
// Output: "Child 2"

How to Get Every Nth Child​

To get a collection of all children that match a pattern, use querySelectorAll(). The :nth-child() selector supports keywords and formulas for advanced selections.

const parent = document.getElementById('parent');

// Get all ODD children (1st, 3rd, 5th, etc.)
const oddChildren = parent.querySelectorAll(':nth-child(odd)');
console.log(Array.from(oddChildren).map(el => el.textContent));
// Output: ["Child 1", "Child 3"]

// Get all EVEN children (2nd, 4th, 6th, etc.)
const evenChildren = parent.querySelectorAll(':nth-child(even)');
console.log(Array.from(evenChildren).map(el => el.textContent));
// Output: ["Child 2", "Child 4"]

// Get every 2nd child (same as 'even') using a formula
const everySecondChild = parent.querySelectorAll(':nth-child(2n)');
console.log(Array.from(everySecondChild).map(el => el.textContent));
// Output: ["Child 2", "Child 4"]

The Classic Method: Accessing the .children Collection​

An alternative way to get a child by its position is to access the element.children property. This property returns a live HTMLCollection of the element's direct children.

The logic: the .children collection is 0-based, just like an array. You can access an element by its index using bracket notation.

Solution:

const parent = document.getElementById('parent');
const children = parent.children;

console.log(children); // Output: HTMLCollection(4) [<div>, <div>, ...]

// Get the first child (index 0)
const firstChild = children[0];
console.log(firstChild.textContent); // Output: "Child 1"

// Get the third child (index 2)
const thirdChild = children[2];
console.log(thirdChild.textContent); // Output: "Child 3"
note

While this is simple for getting a single element, the :nth-child() selector is far more powerful for complex patterns like selecting all odd/even children.

Bonus: Getting the Index of a Child Element​

To do the reverse—find the numerical index of a known child element—you can convert the .children collection to an array and use indexOf().

const parent = document.getElementById('parent');
const childToFind = document.querySelector('.child3'); // Assuming it has this class

// Convert the HTMLCollection to an array to use the indexOf method.
const childrenArray = Array.from(parent.children);

const index = childrenArray.indexOf(childToFind);

console.log(index); // Output: 2 (because it's the 3rd child and is 0-indexed)

Conclusion​

For selecting child elements by their position, modern JavaScript and CSS provide excellent, declarative tools.

  • The querySelector(':nth-child(n)') method is the recommended best practice for its power and flexibility. It is the most idiomatic way to handle both simple and complex positional selections (like odd, even, or formulas).
  • Accessing the .children collection by index (e.g., parent.children[0]) is a perfectly valid and simple alternative for getting a single child by its 0-based index.

By using these selectors, you can write clean, readable, and powerful code for navigating the DOM.

Table of Contents