A pseudo-class is a class that exists regardless of the fact if the attribute class was set for an element or not.
Such classes always exist and are supposed for some elements and their conditions.
Pseudo-classes of the element «a» are most spread. For the element «a» there are four pseudo-classes according to the condition of this element at the moment: hover, link, visited and active.
Let's consider each pseudo-class separately:
- hover allows to set the hyperlink style when the cursor is held over it ;
- link – the unvisited hyperlinks yet, visited – the hyperlinks that have been visited already;
- active – active links when it gains focus on.
The pseudo-class hover is mostly often used. A pseudo-class is set in the selector after the colon.
For example (pseudo-class):
a {text-decoration: none;}
a:hover {text-decoration: underline;}
Such a record will add the underlining effect to the link when the mouse cursor is held over it.
There exists a possibility to use a pseudo-class together with a standard class. The order of class names recording does not play a big role but pseudo-classes shall be put at the end of the simple selector.
For example (combination of classes and pseudo-classes):
a.navigation:hover {color: #f00;}
Nowadays many web browsers have pseudo-class named hover, present for all the HTML-elements, whereas Internet Explorer 6.0 supports pseudo-class hover only for elements «a».
Use of pseudo-class hover allows to make some interesting effects as like multi-level menu based on CSS without using JavaScript.
Close