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 Customizing Colors and Fonts Use Classes in CSS

Kamil Koenig
Kamil Koenig
4,803 Points
Posted by Kamil Koenig
Kamil Koenig
4,803 Points

Nav a.selected

Hi All, Can anyone explain me wy we have to use as a selector "nav a.selected". Why class name alone ".selected" wouldn`t work?

4 Answers

Ella Ruokokoski
Ella Ruokokoski
20,881 Points
Ella Ruokokoski
Ella Ruokokoski
20,881 Points

This is more spesific. You might have some other elements in your code with the class .selected. Nav a.selected selects only the anchor elements inside Nav that have the class selected

Kamil Koenig
Kamil Koenig
4,803 Points
Kamil Koenig
Kamil Koenig
4,803 Points

Thanks for the answer. Actually I understand what you said. But when I tried class itself as a selector, the color of an element didn't change. So my question I why? As I understand when i use .selected as a selector, all elements with "selected" class should change. And in this example it didn`t work. Using other words:

nav a.selected { color: #32673f; } changed color of link with class="selected" inside the nav to dark grey

BUT

.selected { color: #32673f; }

DOES NOT CHANGE THE COLOR OF LINK WITH SELECTED CLASS

I don`t understand why. As far as I understand the class .selected as a selector should change all tags with selected class.

Can anybody explain?

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Kamil,

I agree with Ella's answer that it would be a good idea in general to be more specific so that you don't get unintended styles on other elements that might have the "selected" class.

We don't have to worry about that here but there is a reason that the selector has to be nav a.selected

Here's the relevant css:

nav a, nav a:visited {
  color: #fff;
}

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

.selected has higher specificity than nav a. No amount of type selectors can beat a class.

The problem is the selector nav a:visited. This is made up of 2 type selectors and 1 class selector. This will beat .selected because it's only 1 class selector. This means that once a link has been visited, it will remain white until you hover over it.

nav a.selected is 2 type selectors and 1 class selector so it ties with the :visited selector. The one that comes later wins in a tie.

Chris Jardine
Chris Jardine
13,299 Points
Chris Jardine
Chris Jardine
13,299 Points

Hi Kamil

nav a {
 color: #fff;
}

has more specificity than

.select {
 color: #32673f;
}

Thats why it doesn't work and therefore you need to change it to:

nav a.select {
 color: #32673f;
}
Kamil Koenig
Kamil Koenig
4,803 Points
Kamil Koenig
Kamil Koenig
4,803 Points

Thanks, now I understand :)

Best regards