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
Dwayne Munro
Front End Web Development Techdegree Student 13,108 PointsIn the following tasks you'll be required to select various elements on the index.html page. In the app.js file on line
How do I select the list items inside nav unordered list?
let navigationLinks = document.querySelectorAll("nav:li");
let galleryLinks;
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>
5 Answers
Polo Moreno
11,782 Pointshi! Dwayne Munro
let navigationLinks = document.querySelectorAll("nav ul li a");
this is the answer correct remember, you have specify where is localited the element. this way is more easy for the console read and understand what is you do.
Happy coding!! :)
Jason Anello
Courses Plus Student 94,610 PointsHi Dwayne,
If you needed to select the list items within a nav then your selector would have to be "nav li"
but in this case, it's asking you to select the links that are within the nav element.
Gil Silva
3,220 PointsHi Dwayne, The right answer is document.querySelectorAll("nav a");
That's because you have to select the links (a) and not the list(li).
Safae Chkirate
6,113 PointsYou have to think the same way as if you select html elements in your css style sheet:
if a need to select ==>
```
<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>
```
let galleryLinks = document.querySelectorAll('#gallery li a');
if a need to select ==>
<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>
let navigationLinks = document.querySelectorAll('nav ul li a');
I have watched the lesson a few times to understand, a tip test yourself, I created a small web page with a program that displays and hides the images. Train yourself and you'll get there :)
Michael Williams
Courses Plus Student 8,059 PointsWhy do you need ul for navigationLinks but not for galleryLinks?
Steven Parker
231,248 PointsYou don' t need it, it's overly specific. See my original comment.
Michael Williams
Courses Plus Student 8,059 PointsSteven, I understand what you wrote above, but why don't you need it? It seems with all the other code we write we have to super specific for the computer to understand.
Also, I think the thing that's tripping everyone up is that there was never (as far as I can remember) a video where something like this was done and that we were told you add spaces and multiple tags to access specific ones. I understand that we need to exercise applied learning but at the same time, we don't know what we don't know. Do you—or anyone else—have the reference video link handy that describes this?
Steven Parker
231,248 PointsThe instructions ask for "all links in the nav element", which translates to "nav a". The more specific selector might pass the challenge, but only because all the links happen to be inside list items. If the nav element contained a mix of links both in and out of list items, the more specific selector would not work.
Because the focus of this course is JavaScript, CSS selectors are not covered in detail. But in the Using CSS Queries video, the instructor mentions that resources are included for them in the teacher's notes, notably the CSS Selectors course and the MDN CSS selectors page.
But your point about requiring the optional information in the challenge seems valid, so you may want to submit a bug report to the staff using the instructions on the Support page.
Michael Williams
Courses Plus Student 8,059 PointsThank you Steven for your reply and patience with me. I guess I have one more question to help me further understand. My logic was that you can only stick list items between the unordered list tags—which is why I thought it would pass no matter what. But it sounds like I'm wrong in my thinking. So say there were other elements between the list items. If the code is super specific then wouldn't nav ul li a work? Because my thinking is that nav ul li a is the map that says, "Okay, go to the nav tag. Once you're there, find the ul. Once you're inside, find any li and grab all of the as but don't touch anything else." Without having read further (which I will check out the links), that's my understanding of how that convention works.
Steven Parker
231,248 PointsYou're right that all children of a list must be list items. What I was suggesting is that there could be links ("a" tags) that are inside the "nav" but not part of any list.
Bhaskar Das
1,487 PointsnavigationLinks = document.querySelectorAll ('nav a');
Steven Parker
231,248 PointsSteven Parker
231,248 PointsWhile this answer does pass the challenge, it's a bit overly-specific. The literal translation of "all links in the nav element" into a selector would be "
nav a".ldjopxxaeg
Courses Plus Student 3,682 Pointsldjopxxaeg
Courses Plus Student 3,682 Pointscan we use the same thing like this doucment.querySelectorAll("nav:ul:li:a")
Steven Parker
231,248 PointsSteven Parker
231,248 PointsThat's not a valid selector. Colons (:) are for pseudo-classes, not tag names.