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

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.

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

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

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