selector for get all the first child with classname x

Question

I have this html structure

    <ul class="container">
        <li class="rock"></li>
        <li class="paper"></li>
    </ul>
    <ul class="container">
        <li class="rock"></li>
        <li class="paper"></li>
    </ul>
    <ul class="container">
        <li class="paper"></li>
        <li class="rock"></li>
    </ul>
    <ul class="container">
        <li class="rock"></li>
        <li class="paper"></li>
    </ul>
    <ul class="container">
        <li class="paper"></li>
        <li class="rock"></li>
    </ul>

I want to get from the element with class container, all the first-child with class paper.

I tried

let selected=document.querySelectorAll(".container:first-child.paper");

but was wrong. How I get the correct query selector?

Answer 1

Your selector is not correct to target the elements you are looking for.

Try

let selected = document.querySelectorAll(".container .paper:first-child");

Demo:

let selected = document.querySelectorAll(".container .paper:first-child");
console.log(selected);

<ul class="container">
  <li class="rock"></li>
  <li class="paper"></li>
</ul>
<ul class="container">
  <li class="rock"></li>
  <li class="paper"></li>
</ul>
<ul class="container">
  <li class="paper">1234</li>
  <li class="rock"></li>
</ul>
<ul class="container">
  <li class="rock"></li>
  <li class="paper"></li>
</ul>
<ul class="container">
  <li class="paper">ABCD</li>
  <li class="rock"></li>
</ul>