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

handy christian
handy christian
2,899 Points
Posted by handy christian
handy christian
2,899 Points

I dont know what should i do with this code challenge, anybody can solve this?

Please let me know how the descendants operators work and give me the right answer of this challenge

js/app.js 
let navigationLinks;
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>

4 Answers

Unsubscribed User
Unsubscribed User
15,444 Points

The descendant selector matches all elements that are descendants of a specified element. The first selector here would be the nav selector as this represents the ancestor element—a structurally superior element. The second selector is for links, so we would use the anchor tag selector (a) this represents the descendant element we’re trying to match.

For example:

let navigationLinks = document.querySelectorAll("nav a");
handy christian
handy christian
2,899 Points
handy christian
handy christian
2,899 Points

HOLYYY thanks brother.... i got stuck in it for 3 hours already. I keep using commas, dot, >, and others with nav ul li a :'(

Unsubscribed User
Unsubscribed User
15,444 Points
Unsubscribed User
Unsubscribed User
15,444 Points 
let navigationLinks = document.querySelectorAll("nav ul li a");
let navigationLinks = document.querySelectorAll("nav > ul > li > a");

The two examples above should also work, it comes down to how specific you want to be. Using nav a as a selector would select all links within the nav element. Say that we had two lists, an unordered and ordered list. Using the selectors above would be a good way of being more specific and only selecting the links in the unordered list.

When using the > symbol, be sure to follow every descendant between the ancestor and the descendant you want to select. e.g:

let navigationLinks = document.querySelectorAll("nav > ul > a") 
//This wouldn't work as it's missing the li descendant

let navigationLinks = document.querySelectorAll("nav ul a");
 //This however will work fine

Hope this clears things up a bit!

Regards,
Berian

handy christian
handy christian
2,899 Points
handy christian
handy christian
2,899 Points

nah, it wont work sir. I'm stuck with this challenge before because i did this code. The right answer is above you.

buddha acharya
PLUS
buddha acharya
Courses Plus Student 4,023 Points
buddha acharya
buddha acharya
Courses Plus Student 4,023 Points

document.querySelectorAll('nav a');

this one will target all the element under ul with id 'gallery' and find for link 'a' document.querySelectorAll('ul#gallery a');

this is the last one which will look for img inside the footer. document.querySelectorAll('footer img');

Alasdair Marchant
Alasdair Marchant
4,592 Points
Alasdair Marchant
Alasdair Marchant
4,592 Points

Hey ! I tried the following code:

navigationLinks = document.getElementsByTagName("nav a");

does anyone know why this doesn't work?