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

Posted by Stephanie Franco
Stephanie Franco
9,167 Points

Why use "nav a.selected" rather than just ".selected"?

Hi guys! I'm in the "Using Classes in CSS" tutorial, and it's saying to use a class to make the Portfolio link (within a UL within the NAV) dark green.

<li><a href="index.html" class="selected">Portfolio</a></li>

nav a.selected { color:#32673f; }

My question is: why can't I just write .selected? Why do I have to write "nav a.selected"? It's the only time the class ".selected" is used on the whole page. For an experiment, I tried using just ".selected" but it didn't work. It only works when it's "nav a.selected".

Any ideas? Thank you so much.

2 Answers

Jake Lundberg
Jake Lundberg
13,965 Points

It is because of selector specificity. You have to be more specific in this case because there are other styles overriding your .selected styles. So basically, if you don't include nav a, then the browser is seeing your other styles as more important.

Stephanie Franco
Stephanie Franco
9,167 Points
Stephanie Franco
Stephanie Franco
9,167 Points

Okay that makes sense - thanks so much!