Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript JavaScript and the DOM (Retiring) Getting a Handle on the DOM Practice Selecting Elements

I'm still having trouble with CSS selectors, I think there must be some kind of disconnect here. Why test on CSS?

What is the deal here I am trying to look up CSS selectors but I am having trouble finishing this problem since I am not super acquainted with them. I have to find the ul with th eid #gallery ok done. But then I need to select the list items within it, so why wont #gallery li or #gallery a work for this problem. We should have gone over CSS selectors more in depth or maybe there is a course that I should take first to better understand. What is the deal here? What do I do? What Am I DOING WRONG?

js/app.js
let navigationLinks = document.querySelectorAll("nav a");
let galleryLinks = document.querySelectAll("#gallery a");
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

andren
andren
28,538 Points

Your selector #gallery a is correct. The problem with your solution is that there is a typo in the function name, you have written querySelectAll instead of querySelectorAll. Fixing that typo will make your code work.

As for you missing CSS knowledge if you are following the Front End Web Development track (which is the most common way of ending up on this course) then you should have completed the CSS Basics course before this course.

The CSS Basics course does as the name imply only cover the basics of CSS, but it does cover tag, class, id and descendant selectors which is all you need to know to complete these challenges.

As for why challenges that require CSS has been placed in the course it's likely due to the fact that CSS selectors is by far the most convenient and powerful way of selecting elements in JavaScript. Skipping over them in this section would be a disservice to students.

Though I agree that they should have spent more time recapping some of the basic CSS selectors in the videos preceding this challenge. Especially since CSS Basics is not listed as a prerequisite for this course.