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

Posted by Wild Porpoise
Wild Porpoise
2,213 Points

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,558 Points
andren
andren
28,558 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.