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 Write Hexadecimal Colors

Thomas Weld
Thomas Weld
12,293 Points
Posted by Thomas Weld
Thomas Weld
12,293 Points

Why a.selected vs a:hover ?? Why period vs colon?

wondering why the syntax is different for selected vs hover ?

4 Answers

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

When you use a.selected, what you're doing is selecting an anchor element with a class of selected. . Is that CSS notation for a class.

a:hover on the other hand is what's known as a pseudo selector. It triggers a CSS property change by a user triggered action, in this case, a mouse hover.

Fredrik August Madsen-Malmo
Fredrik August Madsen-Malmo
16,261 Points
Fredrik August Madsen-Malmo
Fredrik August Madsen-Malmo
16,261 Points

When you use a period, that means that you want to select an element with that specific class. E.g. 

div.classgoeshere {
    // Code
}

Classes has to be added into the HTML while pseudo-classes can be used without targeting a class/id.

When you use a colon, that means you want to use the pseudo-classes. These are used to refine your selection. E.g.

div:pseudo-class {
    // Code
}

Pseudo classes are really handy when you have a lot of html and don't want to add ids and classes all over the place. You can read more about them here.

Gianni Zamora
Gianni Zamora
9,547 Points
Gianni Zamora
Gianni Zamora
9,547 Points

a.selected means that it will apply those style to whicher link or div is clicked and selected. The a:hover is adding css to apply ONLY when you hover over the item. The difference between a period and colon, well I don't really know maybe other than that is how html accepts the syntax.

Thomas Weld
Thomas Weld
12,293 Points
Thomas Weld
Thomas Weld
12,293 Points

I guess I'm wondering why the syntax would be different for the link states of selected vs. hover ? Here is the example:

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