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

Kurt Coleman
Kurt Coleman
2,967 Points
Posted by Kurt Coleman
Kurt Coleman
2,967 Points

Absolutely lost

I have no clue how to solve this question. I select 'li' and come back with 5 instances. I don't know how to select descendant elements of <nav>.

I added a class attribute to the three <li> elements I wanted to select, and I know this works because I tested it in the console, but it doesn't work within the context of this question.

I have struggled with this for two days now. I need the answer.

js/app.js 
let navigationLinks = document.getElementsByClassName(".t1");
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">
    <style>
      nav ul {
      }
      ul li {
        class='t1';
      }
    </style>

  </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>

2 Answers

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi there, Kurt Coleman! This challenge expects you to pass it making without altering the beginning HTML. I see that you have some CSS points. And you may remember from your studies selecting nested elements. Let's say that I had a div with the class "main-div" and it contains several paragraphs. If I wanted to pick all paragraphs and turn the text red, I could do a rule that looks like this:

.main-div p{
   color: red;
}

This selects all paragraphs inside the class "main-div". I can do the same sort of thing with a querySelector. I can pass in a CSS selector.

However, I feel like you're trying to pick the incorrect elements. The challenge asks you to select all links in the nav. A link is an anchor tag or <a> element. It looks like you are trying to pick the <li> which is a list item.

So you could do:

document.querySelctorAll('nav a');

That would pick all <a> elements (links), inside the <nav> element.

Hope this helps! :sparkles:

Kurt Coleman
Kurt Coleman
2,967 Points
Kurt Coleman
Kurt Coleman
2,967 Points

It doesn't really help. You've gone over things I already know and tried. I can't see how to solve this problem without modifying the HTML.

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Kurt Coleman Then something may be cached either server side or client side in the challenge. Try clicking the "restart" button on the challenge. Then only modify the JS file, because the answer is the answer we both gave you here:

let navigationLinks = document.querySelectorAll('nav a');
let galleryLinks;
let footerImages;
Matthew Hosking
Matthew Hosking
17,404 Points
Matthew Hosking
Matthew Hosking
17,404 Points

You need to use the querySelectorAll as in

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

Kurt Coleman
Kurt Coleman
2,967 Points
Kurt Coleman
Kurt Coleman
2,967 Points

I tried that. It didn't work.