How do I make:

document.getElementsByClassName("first")[1].getElementsByClassName("second")[2];

but with querySelector?

My guess would be:

document.querySelector(".first[1] > .second[2]");

But that doesn't work.

How do I make:

document.getElementsByClassName("first")[1].getElementsByClassName("second")[2];

but with querySelector?

My guess would be:

document.querySelector(".first[1] > .second[2]");

But that doesn't work.

• javascript
• queryselector

3 Answers 3

In your original selection you're grabbing the second element with the class of .first and the third element with the class of .second that is also the child of the former. With this in mind you could use the nth-of-type pseudo selector for both classes and count up accordingly. The only difference with this method in parison to the JS you have now is that it doesn't use the zero-index.

// document.getElementsByClassName("first")[1].getElementsByClassName("second")[2];

document.querySelector('.first:nth-of-type(2) .second:nth-of-type(3)').style = 'border: 1px solid red;'

.first {
  border: 1px solid black;
  padding: 10px;
}

.first:nth-of-type(2) {
  margin-top: 10px;
}

<div class="first">
  <div class="second">Second (1)</div>
  <div class="second">Second (2)</div>
  <div class="second">Second (3)</div>
</div>

<div class="first">
  <div class="second">Second (1)</div>
  <div class="second">Second (2)</div>
  <div class="second">Second (3)</div>
</div>

document.querySelector(".first:nth-of-type(2) .second:nth-of-type(3)").style.color = "red"

<div class="first">
  <div class="second">second1</div>
  <div class="second">second2</div>
  <div class="second">second3</div>
  <div class="second">second4</div>
</div>
<div class="first">
  <div class="second">second1</div>
  <div class="second">second2</div>
  <div class="second">second3</div>
  <div class="second">second4</div>
</div>

You don't need the > operator of the querySelector, you could use the following syntax:

document.querySelector('.first:nth-child(1) .second:nth-child(2)');

Within this HTML code:

var test = document.querySelector('.first:nth-child(1) .second:nth-child(2)').innerText;
console.log(test);

<div class="first">

  <div class="second"></div>
  <div class="second">Hello, I'm your selected div!</div>
  <div class="second"></div>

</div>

<div class="first">
</div>

The JS code will produce the output:

Hello, I'm your selected div!

Keep in mind that CSS pseudoselectors start counting from 1, not from 0, so to achieve the example you posted, you'd need to set :nth-child(2) and :nth-child(3).

Also, if you have a different structure, it might as well be worth taking a look at the :nth-of-type selector, as the :nth-child will require to be the nth child of a parent, in an absolute sense. Differently, :nth-of-type will look for the nth (typeof) child of a parent.