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 James Howes
James Howes
Courses Plus Student 5,675 Points

Completely confused by descendant selectors in this challenge

Hello,
I have revisited the videos in this section and looked at the information in the links about descendant selectors but I am really confused about how to implement the code for this question. Any guidance would be really great

js/app.js 
var navigationLinks = document.querySelectorAll("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>
        <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>

3 Answers

Sean T. Unwin
Sean T. Unwin
28,690 Points
Sean T. Unwin
Sean T. Unwin
28,690 Points

If you look at the Teacher's notes in the link in Challenge, https://teamtreehouse.com/library/descendant-selectors, you will notice that it really boils down to spaces between selectors.

You are using the correct method, i.e. document.querySelectorAll(). The links requested are <a> tags, so we want to use "nav a". What this says is to get the <a> Elements that are children of <nav>, regardless of nesting -- as long as it is a child, not necessarily immediate child.

I hope that clarifies some.

James Howes
James Howes
Courses Plus Student 5,675 Points

Thank you that's perfect

Liam Clarke
Liam Clarke
19,938 Points
Liam Clarke
Liam Clarke
19,938 Points

Hi James

For selecting anchors just inside the nav you can pass in the same selector as you would CSS so don't let the JavaScript around it put you off.

For example:

If i was selecting all of the nav anchors in CSS it would look like this nav a

nav a {
   color: blue;
}

In your query selector its the exact same: nav a

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

This includes using any CSS selectors and combinators depending how specific you wanted to be

Hope this helps, see if you can complete the other 2 keeping the above in mind.

James Howes
James Howes
Courses Plus Student 5,675 Points

Thanks a lot for the help

James Howes
PLUS
James Howes
Courses Plus Student 5,675 Points
James Howes
James Howes
Courses Plus Student 5,675 Points

Thank you both very much, that's explained everything perfectly. I will wipe away my tears and continue