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

Michael Zito
PLUS
Michael Zito
Courses Plus Student 4,073 Points
Posted by Michael Zito
Michael Zito
Courses Plus Student 4,073 Points

First objective I'm struggling with

What I've entered is one of many of a variety of things I've tried. Driving myself insane with trying to figure what I've doing wrong. Can't list all the options I've tried. Sure it is simpler than what I'm doing, but I started out with simpler, and didn't make it anywhere there either. Assistance would really be appreciated.

js/app.js 
let navigationLinks = document.querySelectorAll(['title = navigation-links']);
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 = 'navigation-link'>
        <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

Cooper Runstein
Cooper Runstein
11,850 Points
Cooper Runstein
Cooper Runstein
11,850 Points

You need to select all links that are children of a nav, the css selector for this is nav a. In a querySelectorAll that looks like:

let navigationLinks = document.querySelectorAll("nav a");
Michael Zito
Michael Zito
Courses Plus Student 4,073 Points
Michael Zito
Michael Zito
Courses Plus Student 4,073 Points

Thanks so much for the help! Didn't see this option taught in the lessons leading up to this objective. How is it a but not ul or li or both?

Michael Zito
Michael Zito
Courses Plus Student 4,073 Points
Michael Zito
Michael Zito
Courses Plus Student 4,073 Points

Nevermind, I figured it out thanks to your clarification!

Cooper Runstein
Cooper Runstein
11,850 Points
Cooper Runstein
Cooper Runstein
11,850 Points

If you wanted to be really precise (and this might be a better practice) you could do:

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

But since you know there is only one nav on the page, and the challenge asks you to select all the a tags (which are links) that are nested under the nav, you can use the first option.

In css selectors, the for selector1 selector2 will select all the selector2 elements nested within selector1.

For example:

<div>
  <ul>
    <li>1</li>
    <li>2</li>
  </ul>
  <ul>
    <li>3</li>
  </ul>
</div>

div li will select all the li elements, those with text 1,2, and 3, even though they're nested in different ul elements.