QuerySelectorAll using a class and index number

Question

document.querySelectorAll('.fixers > track > tnty')

On the DOM there are many classes named fixers is there a way to include what class number to use something like

document.querySelectorAll('.fixers[2] > track > tnty')

Currently I do this

document.getElementsByClassName('fixers')[2].querySelectorAll('track > tnty')

Is there a more correct way?

Thank you

Answer 1

You could use the nth-child() pseudo-class to select the second group like so:

const elems = document.querySelectorAll('.fixers:nth-child(2) > .track > .tnty');
console.log(elems);
console.log(elems[0].textContent);

<div class="fixers">
  <div class="track">
    <div class="tnty">1</div>
  </div>
</div>

<div class="fixers"> <!-- 2 -->
  <div class="track">
    <div class="tnty">2</div>
  </div>
</div>

<div class="fixers">
  <div class="track">
    <div class="tnty">3</div>
  </div>
</div>