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

Ion Vuluta
PLUS
Ion Vuluta
Courses Plus Student 2,402 Points
Posted by Ion Vuluta
Ion Vuluta
Courses Plus Student 2,402 Points

Can we use a period? Because in the video they use a period when useing the decesendant selector.

what signs can we use and can anyone help on this challenge?

js/app.js 
let navigationLinks = 'nav';
main nav{
color: darkgrey;
}
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>
Blaize Pennington
Blaize Pennington
13,879 Points
Blaize Pennington
Blaize Pennington
13,879 Points

information on descendant selectors

So this method of selecting elements is done by selecting the parents first and then descending through the children. So basically you are saying I want the children of this specific parent.

<ul>
   <li>Don't select this</li>
   <li>Don't select this</li>
   <li>Don't select this</li>
</ul>
<ul class="parent">
   <li>Select this</li>
   <li>Select this</li>
   <li>Select this</li>
</ul>

//example
const myElement = document.querySelectorAll('.parent li');

This example will select all of the li tags that are children of any element with the class of parent.

Also in the query selector

'element' -> this is referencing a tag

'#element' -> this is referencing an id

'.element'-> this is referencing a class

1 Answer

Blaize Pennington
Blaize Pennington
13,879 Points
Blaize Pennington
Blaize Pennington
13,879 Points

You wrote:

let navigationLinks = 'nav';
main nav{
color: darkgrey;
}
let galleryLinks;
let footerImages;

That is the css. The idea for the challenge is to use javascript to select all of the navigation links on the webpage and put them in a variable. This is done with querySelectorAll.

/*let navigationLinks = 'nav';
main nav{
color: darkgrey;
}*/
let navigationLinks = document.querySelectorAll('nav a'); //this will select the "Links" (anchor tags) inside the nav element
let galleryLinks;
let footerImages;