Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript JavaScript and the DOM (Retiring) Getting a Handle on the DOM Selecting Multiple Elements

Posted by Matt Winer
Matt Winer
4,023 Points

Am I missing something?

I feel like this is a simple challenge but my code isn't correct. Any help? Thanks.

index.html 
<!DOCTYPE html>
<html>
  <head>
    <title>Rainbow!</title>
  </head>
  <body>
    <ul id="rainbow">
      <li>This should be red</li>
      <li>This should be orange</li>
      <li>This should be yellow</li>
      <li>This should be green</li>
      <li>This should be blue</li>
      <li>This should be indigo</li>
      <li>This should be violet</li>
    </ul>
    <script src="js/app.js"></script>
  </body>
</html>
js/app.js 
let listItems = document.querySelectorAll('#rainbow');
const colors = ["#C2272D", "#F8931F", "#FFFF01", "#009245", "#0193D9", "#0C04ED", "#612F90"];

for(var i = 0; i < colors.length; i ++) {
  listItems[i].style.color = colors[i];    
}

1 Answer

andren
andren
28,558 Points
andren
andren
28,558 Points

Yes you are missing something, the task wants you to select all of the li elements nested within the ul element with the id of rainbow.

You have selected the right ul element but that is only half the challenge.

The querySelector / querySelectorAll function supports the use of any CSS selector so the easiest way to select the nested li elements is by using a descendant selector. Which you should have some experience with if you have gone though any of the basic CSS courses.

As a reminder the descendant selector works by typing in the names of multiple selectors separated by a space, the last element you specify is the one that is selected but only if it is nested within the other elements specified.

So if I for example wanted to select let's say a elements nested within an element with an id of example the selector would look like this:

#example a

Using that as a template you should be able to figure out the proper selector that this task is looking for.