'nth-child selector in javascript

I am working with the following svg

const selector = document.querySelector('.yAxis g:nth-child(3)');

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720">
  <rect class="vBoxRect" width="1280" height="720" fill="none" stroke="red"></rect>
  <rect class="boundRect" x="50" y="50" width="1180" height="620" fill="none" stroke="green"></rect>
  <g class="bound" style="transform: translate(50px, 50px);">
    <g fill="none" font-size="10" font-family="sans-serif" text-anchor="end" class="yAxis">
      <path class="domain" stroke="currentColor" d="M0.5,620.5V0.5"></path>
      <g class="tick" opacity="1" transform="translate(0,620.5)">
        <line stroke="currentColor" x2="-6"></line>
        <text fill="currentColor" x="-9" dy="0.32em">0</text>
      </g>
      <g class="tick" opacity="1" transform="translate(0,549.531741126106)">
        <line stroke="currentColor" x2="-6"></line>
        <text fill="currentColor" x="-9" dy="0.32em">10,000</text>
      </g>
      <g class="tick" opacity="1" transform="translate(0,478.56348225221205)">
        <line stroke="currentColor" x2="-6"></line>
        <text fill="currentColor" x="-9" dy="0.32em">20,000</text>
      </g>
      <g class="tick" opacity="1" transform="translate(0,407.59522337831805)">
        <line stroke="currentColor" x2="-6"></line>
        <text fill="currentColor" x="-9" dy="0.32em">30,000</text>
      </g>
      
    </g>
  </g>
</svg>
</body>
</html>

and I want to write a query that selects the 2nd <g> element of class="yAxis" which is following

<g class="tick" opacity="1" transform="translate(0,549.531741126106)">
    <line stroke="currentColor" x2="-6"></line>
    <text fill="currentColor" x="-9" dy="0.32em">10,000</text>
  </g>

const selector = document.querySelector('.yAxis g:nth-child(3)'); is selecting the correct element but why am I passing 3 as nth-child(3) value when I am selecting the 2nd g element of class=yAxis

javascript css-selectors

Solution 1:^[1]

You should be using :nth-of-type instead of :nth-child because the :nth-child selector will also count the first path element:

const selector = document.querySelector('.yAxis g:nth-of-type(2)');
console.log(selector.outerHTML);

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720">
  <rect class="vBoxRect" width="1280" height="720" fill="none" stroke="red"></rect>
  <rect class="boundRect" x="50" y="50" width="1180" height="620" fill="none" stroke="green"></rect>
  <g class="bound" style="transform: translate(50px, 50px);">
    <g fill="none" font-size="10" font-family="sans-serif" text-anchor="end" class="yAxis">
      <path class="domain" stroke="currentColor" d="M0.5,620.5V0.5"></path>
      <g class="tick" opacity="1" transform="translate(0,620.5)">
        <line stroke="currentColor" x2="-6"></line>
        <text fill="currentColor" x="-9" dy="0.32em">0</text>
      </g>
      <g class="tick" opacity="1" transform="translate(0,549.531741126106)">
        <line stroke="currentColor" x2="-6"></line>
        <text fill="currentColor" x="-9" dy="0.32em">10,000</text>
      </g>
      <g class="tick" opacity="1" transform="translate(0,478.56348225221205)">
        <line stroke="currentColor" x2="-6"></line>
        <text fill="currentColor" x="-9" dy="0.32em">20,000</text>
      </g>
      <g class="tick" opacity="1" transform="translate(0,407.59522337831805)">
        <line stroke="currentColor" x2="-6"></line>
        <text fill="currentColor" x="-9" dy="0.32em">30,000</text>
      </g>
    </g>
  </g>
</svg>

Solution 2:^[2]

the path is first child .
and with .yAxis g:nth-child(3) you select 2th g
you can use .yAxis g:nth-of-type(2)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	Ahmad MRF

'nth-child selector in javascript

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]