Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS How to Make a Website Adding Pages to a Website Style New Pages

Wen Hsu
Wen Hsu
580 Points

when you need to put html element in front of period "." in class selector?

I don't understand why in previous example we have to put "nav a" in front of period for it to work

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

but

.selected { color: #32673f; }

won't work. (I have tried.)

.social-icon { width: 20px; height: 20px; margin: 0 2px; }

and

.profile-photo{ display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 100%; }

will work fine. When we need to put html in front of period "." and when we don't in class selector ?

3 Answers

Hi Wen,

The reason .selected won't work is due to css specificity.

You have the following css from the project:

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

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

This works because nav a:visited has the same specificity as nav a.selected (1 class and 2 type selectors) so whichever one comes later takes precedence. So a visited link that is selected will take on the darker green color, not white.

This is the css that doesn't work:

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

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

.selected has a lower specificity than nav a:visited so even though a link is the selected one it still remains white because nav a:visited takes precedence even though it comes before the .selected rule.

To test the use of .selected for yourself you can do a couple of things.

You can first make sure you're on the portfolio page and then clear you browser history so that "portfolio" is no longer a visited link and you will see that .selected temporarily works. Once you refresh the page or click on the portfolio link it will be treated as a visited link and remain white.

Secondly, you can temporarily change the css to this:

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

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

This will work similar to the project css because :visited and .selected have equal specificity. I don't recommend that you use :visited by itself in a real project because you won't be able to differentiate between visited nav links and visited links elsewhere on your page.

So in this case, the reason we have to put nav a in front is because we need to match the specificity of an earlier rule so that we can override it's property/value pair.

Let me know if anything is still not clear.

Adam Duffield
Adam Duffield
30,494 Points

I think you just need a space between a and .selected :)

Wen Hsu
Wen Hsu
580 Points

My question is why .selected won't work in this case. nav a.selected works fine...

Darry Berger
PLUS
Darry Berger
Courses Plus Student 6,818 Points

in order to use functions such as hover or visited or selected you must use colons not periods.

nav a:selected { color: #32673f; }
Wen Hsu
Wen Hsu
580 Points

I understand when it's Pseudo-classes such as visited and hover, we have to use : not period. However in this case selected is a class name defined by myself.

Wen Hsu
Wen Hsu
580 Points

I understand when it's Pseudo-classes such as visited and hover, we have to use : not period. However in this case selected is a class name defined by myself.

Wen Hsu
Wen Hsu
580 Points

I understand when it's Pseudo-classes such as visited and hover, we have to use : not period. However in this case selected is a class name defined by myself.