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

Tewanda Hinson
Tewanda Hinson
5,336 Points

Descendant selectors

Can you point me to resources on this subject? I have been unable to get this challenge correct.

js/app.js
let nav = document.querySelector('nav');
let navigationLinks = nav.querySelectorAll('li');
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>

1 Answer

rabin
seal-mask
.a{fill-rule:evenodd;}techdegree
rabin
Front End Web Development Techdegree Student 15,106 Points

Hey Tewanda Hinson,

I will give you the answer for the first challenge along with the explanation.

For the first challenge, you will need to select all links inside nav element. And as you can see below <nav> is a parent and in order to target its children, you can use descendant selector.

"The descendant selector is a way to select elements that are located somewhere underneath other elements."

The following example selects all <a> tags inside <nav> element and change its background-color to yellow:

nav a {
  background-color: yellow;
}
 <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>

Here, I have used a querySelectorAll() method to select all links inside the <nav> element and stored it in a navigationLinks variable.

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

Learn about descendant selector: https://www.w3schools.com/css/css_combinators.asp

Hope this helps!

Tewanda Hinson
Tewanda Hinson
5,336 Points

Thank you for this help. The css was not included with the files so how will I go about changing or checking the css?