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 Practice Selecting Elements

Posted by Seth Lewis
.a{fill-rule:evenodd;}techdegree seal-36
Seth Lewis
Full Stack JavaScript Techdegree Graduate 18,191 Points

Why doesn't <ul> element get passed?

The correct answer for the first challenge is:

let navigationLinks = document.querySelectorAll(nav li a);

Why isn't the <ul> element passed into querySelectorAll method? It is inside the <nav> element after all...

js/app.js 
let navigationLinks = document.querySelectorAll('nav li a');
let galleryLinks;
let footerImages;
index.html 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Nick Pettit | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/responsive.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Nick Pettit</h1>
        <h2>Designer</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html" class="selected">Portfolio</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>
    <div id="wrapper">
      <section>
        <ul id="gallery">
          <li>
            <a href="img/numbers-01.jpg">
              <img src="img/numbers-01.jpg" alt="">
              <p>Experimentation with color and texture.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-02.jpg">
              <img src="img/numbers-02.jpg" alt="">
              <p>Playing with blending modes in Photoshop.</p>
            </a>
          </li>
        </ul>
      </section>
      <footer>
        <a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
        <a href="http://facebook.com/nickpettit"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
        <p>&copy; 2016 Nick Pettit.</p>
      </footer>
    </div>
  <script src="js/app.js"></script>
  </body>
</html>

2 Answers

Jesús Armenta
Jesús Armenta
13,505 Points
Jesús Armenta
Jesús Armenta
13,505 Points

Hi, it's because to the descendant selector is not really needed because it will select any list items that are anywhere underneath even if they are buried three levels deep within other nested lists, and this selector will still match it.

For you to really need to add the ul you should use child combinator selector like this 'nav > ul > li > a' because it searches for direct children. Hope that this will help you.

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

I suppose it could do but the selector we're using is still quite a specific one even though it's a list of elements, it represents a specific structure in the DOM tree. Out of interest I tried the challenge with the <ul> element included and it does pass the challenge.

If you want to be specific about which element absolutely has to be a direct descendent of another you can use the > operator.

Seth Lewis
.a{fill-rule:evenodd;}techdegree seal-36
Seth Lewis
Full Stack JavaScript Techdegree Graduate 18,191 Points

Thank you, Jonathan!