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
Brady Harris
1,278 PointsWhy does document.querySelectorAll('.nav') only return one element instead of three? I am stuck on this challenge.
I am not sure of how to select all three elements of the nav class.
let navigationLinks = document.querySelectorAll('nav');
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>
2 Answers
Jennifer Nordell
Treehouse TeacherHi there! The reason it's only returning one element is that you are selecting all <nav> elements on the page. But there is only one nav element there. The challenge asks you to select all links inside that nav element. Links are denoted by the "anchor" or <a> tag. There are quite a few <a> tags on this page, but we only want the ones inside the opening and closing <nav> </nav> tags. To do this, we can give what is known as a CSS selector.
For instance, to select all h2 elements within a div tag, I could write:
// This selects all h2 elements inside a div
document.querySelectorAll('div h2');
I think you can extrapolate the answer with this hint, but let me know if you're still stuck!
Shay Paustovsky
969 PointsHi Brady,
The selector js const navigation = document.querySelectorAll('nav')
is selecting all the elements that correspond to the argument value you have provided. Since there is only one 'nav' element on the page it will return only 1 element.
To select the 3 list-items use a descendant selector as the argument for the querySelectorAll() method.
const navigation = document.querySelectorAll('ul li');
hope this has helped,
Shay
Brady Harris
1,278 PointsHey Shay, I was able to come up with the answer. Thanks for the quick response!
Brady Harris
1,278 PointsBrady Harris
1,278 PointsHello Jennifer - Thanks for the quick response! I was able to get the answer from this, navigator through nested statements makes sense now. Thanks again!