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
Istvan Angyal
1,338 PointsWhy do we use a pseudoclass for the hover and the visited states and why a real class for the selected state?
I am a bit bogged on this one.
1 Answer
Chris Shaw
26,676 PointsHi Istvan,
The reason Nick does this is to change the colour and styling of the anchor tag but only for the one that has the class of selected, if we were to apply this to all 3 elements they would receive the same styles which would basically void the reason of having it there, the :hover pseudo selector however is part of a family of pseudo selectors in which anchor tags have 5 of them as follows.
- :link
- :focus
- :active
- :visited
- :hover
Now you might look at :focus and :active and think why not just use them and the reasoning is we want the styles for that specific anchor tag to remain regardless of whether you hover of it, press down or tab to it using the keyboard.
The best example I think I could give is the Treehouse sidebar menu on the left hand side of our screens, when you're on the forum you can see the speech bubble type icon appear as white whilst the other icons are greyed out in the background. The Treehouse developers have achieved this using the exact same concept but instead of selected the class name is current.
Hope that helps =)
Istvan Angyal
1,338 PointsIstvan Angyal
1,338 PointsThank you Chris, that helps. So if I am right, there is no pseudo class for the selected state, correct? Still, the class 'selected' is only applied when the user is currently on that page right, so eventually it could be used on all 3 nav elements, or not?
Chris Shaw
26,676 PointsChris Shaw
26,676 PointsCorrect, this also doesn't look like it will be part of CSS in the near future either as it's just too unpredictable what element you may want selected therefore classes are the safest way to go about element specific styles.
Again that's correct however a class such as
selectedimplies a singular type in navigation terms unless it's both the parent and a child of the parent which makes sense as they carry direct context with each other whereas setting two parents as selected would be confusing and make no sense to the user looking at it.Istvan Angyal
1,338 PointsIstvan Angyal
1,338 PointsChris, sorry for the late reply. I have not been around here for a couple of days. For the first part thanks I got it. For the second part... I have to say this is a bit over my head. I am a real dummy in coding, I am merely a graphic designer and only for printed publications, so if you still have the time please explain in simpler terms. In the meantime I understood what caused my initial confusion, basically I did not think with the fact that each page will have its code written separately, Now that is clear however a question remains, whether or not a class like "selected" or any class or pseudoclass does anything by itself? I mean does the browser translate it into a specific action and therefore it always have to be a specific term within the CSS language or I can just practically write anything for a class? Thanks for your patience, I am trying hard to get this right.