JavaScript JavaScript and the DOM Getting a Handle on the DOM Practice Selecting Elements

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,651 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.

Thank you that's perfect

Liam Clarke
MOD
Liam Clarke
Treehouse Moderator 19,801 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.

Thanks a lot for the help

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