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

Daniel Gibson
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Daniel Gibson
Full Stack JavaScript Techdegree Graduate 15,968 Points

How do I select all list items under the <nav> tag?

I don't understand how to do the first task in this challenge. How do I select all list items under the <nav> tag? What is <nav>? Is it a class or tag? Do I need to use querySelectorAll or getElementsByClassName?

js/app.js
let navigationLinks = document.querySelector('[title=nav]');
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 title='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>

1 Answer

Dane Parchment
MOD
Dane Parchment
Treehouse Moderator 11,077 Points

We can use the css selector: >. Which let's us choose a child of an element.

So if we were to say: ul > li it would grab all li elements that are children of any ul element.


I want you to use the logic above to try and get the elements you want.

Hint: You can chain the selector, so that you go further down the child list, ex: div > ul > li. To get all li elements that are part children of a ul element within a div.

If you are still stuck look below for the answer.


Still stuck?

Here you go: nav > ul > li that is the selector you need to use.

P.S. You are using the title attribute wrong reasons (though frankly it shouldn't be used at all). Title is for identifying an element mainly for the use of default tooltips built into the browser. However, you are using at an identifier for the use of coding/styling an element. Instead you should use the class or id tags for that.