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 trialOlivia DeSimone
798 PointsIn 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.
9,518 PointsIt 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
11,985 PointsThe 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!