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 How to Make a Website Customizing Colors and Fonts Use Classes in CSS

Posted by Olivia DeSimone
Olivia DeSimone
798 Points

In the CSS, why do you use a period for selected and a colon for hover? "nav a.selected, nav a:hover"

In the CSS, why do you use a period for selected and a colon for hover?

"nav a.selected, nav a:hover"

Thank you.

2 Answers

Matt F.
Matt F.
9,518 Points
Matt F.
Matt F.
9,518 Points

It is the CSS syntax - classes use the period and psuedo-classes use the colon.

:hover is a psuedo-class, which is 'built into' the elements (as Michelle above said, they are special states. Other psuedo classes are :visited, :focus, :enabled. See here for more information: http://www.w3schools.com/css/css_pseudo_classes.asp).

.selected is a class that you set in the html. In this example:

<a class="selected" href="url-here">Anchor Text</a>

If the html were changed to: 

<a class="chosen" href="url-here">Anchor Text</a>

You would instead use .chosen in the CSS

In both cases, however, you could use :hover as it is a psuedo-class that is 'built-in'

Michelle Wee
Michelle Wee
11,985 Points
Michelle Wee
Michelle Wee
11,985 Points

The period is for a class selector. So for nav a.selected, if you look in the html document, you can see that the anchor element should have a class of selected. Example:

<a class="selected" href="">This is a link.</a>

Hover is a pseudo-class. Pseudo-classes define special states of elements, for example for anchor tags we have :active, :visited, etc. In the case of pseudo-classes, colons are used.

Hope that helps!