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

Question

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>

Answer 1 · 2018-11-22T07:02:59Z

November 22, 2018 7:02am

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.

Welcome to the Treehouse Community

Looking to learn something new?

Daniel Gibson

Daniel Gibson

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

1 Answer

Dane Parchment

Dane Parchment