Welcome to the Treehouse Community
Looking to learn something new?
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?
let navigationLinks = document.querySelectorAll("nav a"); let galleryLinks = document.querySelectAll("#gallery a"); let footerImages;
<!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>© 2016 Nick Pettit.</p> </footer> </div> <script src="js/app.js"></script> </body> </html>
#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.
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.
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.