How to Get nth-child Using querySelector in JavaScript?

Get nth-child using querySelector in JavaScript

When working with the DOM (Document Object Model) tree – the structure of HTML documents, you may need to get the nth-child of the DOM node. For instance, you could add an active class to the third list item in the navigation menu or style the second paragraph within a div block,… This article will show you how to get nth-child using querySelector in JavaScript.

Get nth-child using querySelector in JavaScript

document.querySelector()

The document object represents the web page’s content loaded in the browser. It has a method called querySelector(), which will return the first DOM element that matches a specified selector, or a group of selectors and returns null if there are no matches. 

If you want to get a list of elements that matches a specified selector, you can use querySelectorAll(), which is also a method of the document object.

Syntax

document.querySelector(selectors)

The selectors are patterns used to select element(s). It must be a valid CSS (Cascading Style Sheet) selectors string, or it will throw an error if not valid.

To get nth-child, you pass parent :nth-child() selector to querySelector(), in which “:nth-child()” is a pseudo-class that matches elements that are nth-child of its parents. For instance, “document.querySelector(‘#parent :nth-child(3)’)” means to get the third child element of the parent element.

The pseudo-class specifies the unique state of an element, like hovering or clicking on an element.

Example

Get the third child of the parent element.

<!DOCTYPE html>
<html lang="en" style="font-size: 20px">
  <head>
    <meta charset="UTF-8" />
    <title>Get nth-child using querySelector in JavaScript</title>
  </head>
  <body style="background: greenyellow; padding: 20px">
    <div>Hello, welcome to LearnShareIT</div>
    <ul id="parent">
      <li id="child-1">Child 1</li>
      <li id="child-2">Child 2</li>
      <div id="child-3">Child 3</div>
      <li id="child-4">Child 4</li>
    </ul>
    <script src="index.js"></script>
  </body>
</html>
const thirdEle = document.querySelector("#parent :nth-child(3)");

// Check if it exists, then change the background
if (thirdEle) {
    thirdEle.style.background = "red";
}

Output

Get the second child element of the parent element when type = “li”.

const secondEle = document.querySelector("#parent li:nth-child(2)");

// Check if it exists, then change the background
if (secondEle) {
    secondEle.style.background = "red";
}

const thirdEle = document.querySelector("#parent li:nth-child(3)");

// Check if it exists, then change the background
if (thirdEle) {
    thirdEle.style.background = "orange";
}

Output

In this case, the “element:nth-child()” syntax will match only if the element at that position is the specified type. Hence, “#parent li:nth-child(2)” will match, but “#parent li:nth-child(3)” will not match because the third child is an element with type = “div”.

Get the child element at the first odd position of the parent element

const eleAtFirstOddPos = document.querySelector("#parent :nth-child(odd)");

// Check if it exists, then change the background
if (eleAtFirstOddPos) {
    eleAtFirstOddPos.style.background = "red";
}

Output

In the example above, the “element :nth-child(odd)” syntax will match any element in odd rows. Similarly, “element :nth-child(even)” will match the element in even rows.

Summary

This article is all about how to get nth-child using querySelector in JavaScript. If you want more solutions to get nth-child, you can read this. If you have any questions or comments, please feel free to leave us a comment below.

Maybe you are interested:

Leave a Reply

Your email address will not be published. Required fields are marked *