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 CSS Selectors Going Further with Attribute Selectors and Pseudo-Classes :first-child and :last-child Challenge

In this challenge, it asks you to target the list items inside .main-nav.

To get the correct answer, I didn't include .main-nav anywhere. I just answered it with: li:first-child { border: none; }

How do I know I am targeting the list items inside .main-nav if I don't include it anywhere in my code?

Thanks!

I appreciate the help.

2 Answers

Bob McCarty
PLUS
Bob McCarty
Courses Plus Student 16,618 Points

Stephanie, The test accepts both selectors ".main-nav li:first-child" and "li:first-child " as the correct answer. Using the ".main-nav li:first-child " selector styles only the first list item in .main-nav element. The selector without the .main-nav qualifier styles all first child list items <li> on the page.

Bob.

Gianmarco Mazzoran
Gianmarco Mazzoran
22,076 Points

Hi Stephanie Hamilton ,

if in your html file the only list-items that you have is inside an <ul> tag with the class "main-nav" (like in this challenge), you can select only the li tag because you don't have any other list-items inside your document.

yourAwesome.css
li:first-child {
/* your awesome style */
}

Otherwise if you have, perhaps, two menus inside your html file, in order to style each one in a different way, you have to be more specific when you select the <li> tag in your css file.

yourAwesome.css
.main-nav li:first-child {
/* your awesome style */
}

.second-nav li:first-child {
/* your awesome style */
}