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

HTML How to Make a Website Styling Web Pages and Navigation Create a Horizontal List of Links

Posted by Gillian Draper
Gillian Draper
3,057 Points

Class selector

Hi - I am unsure why the class selector is treated differently on the two occasions that it has been used. i.e. (the speech marks are for reference purposes only): when it is first used, we had to enter: "nav a.selected" i.e. we had to put "nav a" in front of ".selected" or it wouldn't work. However, when we use the class selector ".social-icon" we can't put "footer a" in front i.e. we can't put "footer a.social-icon" (I have tried to see what would happen and it doesn't work). I am not sure the reason why the approach is different in these two cases.

I look forward to hearing from you. (PS: I am finding the course v. helpful).

Kind regards Gill

1 Answer

Steven Parker
Steven Parker
231,198 Points
Steven Parker
Steven Parker
231,198 Points

The challenge you linked to doesn't match the selectors yor mentioned, but I can give you a generic explanation of the selectors themselves.

The selector: "nav a.selected" means "links (a elements) that have the class selected that are descendants (inside) of a nav element". If you just use ".selected" it would target every element (of any type) that has the class selected.

The selector ".social-icon" targets every element that has the class social-icon. If you use "footer a.social-icon" it targets only links (a) that have that class and are also inside the footer element.

I'd have to see the HTML these go with to be more explicit about why one worked and the other did not in each case.

Gillian Draper
Gillian Draper
3,057 Points

Hi Steven - thanks for your reply.