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 trialThomas Weld
12,293 PointsWhy a.selected vs a:hover ?? Why period vs colon?
wondering why the syntax is different for selected vs hover ?
4 Answers
Jonathan Grieve
Treehouse Moderator 91,253 PointsWhen 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
16,261 PointsWhen 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
9,547 Pointsa.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
12,293 PointsI 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; }