CSS Pseudo-Classes
Some CSS selectors allow use to use what are called CSS pseudo-classes in order to add some special effects. Probably the best example of this is the anchor tag and it’s hover features.
Anchor tag’s behaviours can be manipulated by using pseudo-classes. Let’s say we want a link to go bold when we hover over it, we can use the pseudo class to do this. Look at the syntax:
selector:pseudo{ foo:bar; }
Now let’s do our bold hover example. I’ll also pop in the original anchor declaration:
a { color:red; }
a:hover { font-weight:bold; }
When the user hovers their mouse over the anchor it will appear bolded. I’ve done this on the link below:
Easy.
Other pseudo classes for anchor text include:
- link
- visited
- hover
- active
All of these refer to the state and behaviour of the anchor itself. It’s pretty self-explanatory what each is for.
It is also possible to use a class on your pseudo-classes:
a.red:hover { font-weight:bold; }
You can then use class="red" to all the class.
Another useful pseudo-element is the first-child pseudo-class. This allows you to add a style to an element that is the first child of another element. This is handy for styling the first list element out of an (un)ordered list.
