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 CSS Selectors Quickstart The Role of Selectors in JavaScript Selectors in JavaScript Review

Kyle Zunino
seal-mask
PLUS
.a{fill-rule:evenodd;}techdegree seal-36
Kyle Zunino
Full Stack JavaScript Techdegree Graduate 23,214 Points
Posted by Kyle Zunino
.a{fill-rule:evenodd;}techdegree seal-36
Kyle Zunino
Full Stack JavaScript Techdegree Graduate 23,214 Points

How do I use a JavaScript code by writing a selector that targets all <a> elements inside the <nav> element. 

<nav>
  <ul>
    <li><a href="index.html">Portfolio</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>

Complete the JavaScript code below by writing a selector that targets all <a> elements inside the <nav> element: 

var expectedLinks = document.querySelectorAll(" ");

3 Answers

Steven Parker
Steven Parker
229,783 Points
Steven Parker
Steven Parker
229,783 Points

Creating a "dependent selector" is the same as if you were doing it for CSS. You put the selector for the containing element first, followed by the selector for the target element, with a space in between.

Kyle Zunino
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Kyle Zunino
Full Stack JavaScript Techdegree Graduate 23,214 Points
Kyle Zunino
.a{fill-rule:evenodd;}techdegree seal-36
Kyle Zunino
Full Stack JavaScript Techdegree Graduate 23,214 Points

Wow. I kept thinking I needed the child selector >. But now that makes sense since <li>'s aren't direct decedents of the <nav>. They're nested within the <ul>

Thank you! That was making my head spin.

Steven Parker
Steven Parker
229,783 Points
Steven Parker
Steven Parker
229,783 Points

Remember: container - then a space - then the target. So what have you tried?

David Forbes
.a{fill-rule:evenodd;}techdegree
David Forbes
Full Stack JavaScript Techdegree Student 3,956 Points

"ul li" "ul li a" I can't quite see where I am going wrong here.

Chiranjeev Prajapat
seal-mask
.a{fill-rule:evenodd;}techdegree
Chiranjeev Prajapat
Full Stack JavaScript Techdegree Student 4,257 Points
Chiranjeev Prajapat
.a{fill-rule:evenodd;}techdegree
Chiranjeev Prajapat
Full Stack JavaScript Techdegree Student 4,257 Points

You tried this one :- "nav a"