Empty node list after selecting a dom element via document.querySelectorAll

Question

Hi all and Happy new 2021! I'm trying to select multiples divs from DOM which all share the same class. I'm using document.querySelectorAll but when I go to console.log my selection I get an empty node list. Below is my markup and my script. Please note that in my markup snippet there is only one div with the specified class but in reality there are 4 of them. I have just omitted all the others for shortness sake.

<ul id="autoWidth" class="cs-hidden">
               <!-- Card1 Start -->
               <li class="item-a">
                   <!-- Box slider Start -->
                   <div class="box">
                       <div class="box__heading">
                           <h3>Today</h3>
                       </div>
                       <div class="box-selectedSign"> //this is the class I'm targeting
                            
                       </div>
                       <div class="box__row-bottom">
                           <p class="horoscopePrediction">Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit rem itaque, voluptate repellendus repellat incidunt, pariatur fugit quos nemo velit ipsum sint magnam id laudantium perspiciatis. Itaque facilis labore laudantium. Dolores illo eos ut quidem consequuntur, laborum vero eum, obcaecati enim rem tempore dolor ipsum porro dolore libero, quibusdam quis!</p>  
                       </div>
                   </div>
                   <!-- Box slider End -->
               </li>
</ul>

SCRIPT

const boxRowTop = document.querySelectorAll(".box-selectedSign");
console.log(boxRowTop);
//OUTPUT 
NodeList []
script.js:18:9

Can you help and explain what I'm doing wrong? Thanks