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 trialKamil Koenig
4,803 PointsNav 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
20,881 PointsThis 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
4,803 PointsThanks 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
Courses Plus Student 94,610 PointsHi 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
13,299 PointsHi 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
4,803 PointsThanks, now I understand :)
Best regards