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

CSS

Stuck again: jQuery selection by CSS

"On the next line, use jQuery to select all list items (li) in an unordered list (ul) with the class of 'nav'?"

I've tried many versions, it's a bit frustrating that Treehouse expects to only use the one it expects you to. So how is it done?

4 Answers

J.T. Gralka
J.T. Gralka
20,126 Points

S.K.,

I suspect you're frustrated because you might have tried using this selector:

$(".nav ul li");

But what James has said is completely relevant. You need to realize that the list item elements belong to an unordered list whose class is nav. There is a way to select elements based off of specific classes, and one hint might be to suggest that you consider selecting the unordered list based off of its class.

The problem with the selector I wrote above is that It suggests that some element with a class of nav has a ul element as its child. Remember that the element with the nav class is the ul itself. Try selecting the unordered list by also specifying its class.

The frustration you're experiencing has to do with specificity. Take a look at the question again, rematch the video, and if you still feel like you're having trouble, let us know. We'll be more than happy to guide you in the right direction.

Best,

J.T.

James Barnett
James Barnett
39,199 Points

@SK -

The key to this question is to understand that the <ul> element has a class of nav, in other words it's <ul class = "nav">.

So the HTML would look something like this:

<ul class="nav">
  <li></li>
</ul>

Now ask youself ... what is the CSS selector I would use to select all <li>s from the above markup?

J.T, that helped me tremendously. Cheers!