CSS Pseudo-Class

A pseudo-class is similar to class in HTML. But it’s not declared in Markup explicitly.

A pseudo-class starts with the colon(:). There is no white space appear between the selector and colon. Also there should be no white space after the colon.

If we start from the beginning, then CSS1 introduced the :link, :visited and :active pseudo classes but it were limited to HTML link (a) elements only. These pseudo-classes defines the state of the link like already visited, normal behaviour or active which is currently being selected.

Then CSS2 explored the range of the pseudo-classes and made available to all the elements. In this version :active joins into two other dynamic classes like :hover and :focus. :hover defines the element state by moving the mouse moves over it and :focus defines the state when cursor is focused on that element.

A simple selector can contain more than one pseudo-class if the pseudo-classes are not mutually exclusive. Like, the selectors a:link:hover and a:visited:hover are valid, but a:link:visited is not because :link and :visited are mutually exclusive.

The order of declaring the pseudo-classes is more important. The :link and :visited are comes first generally. Next comes the :focus and :hover and :active usually comes last.

Please find the below code for declaring the pseudo-class for element.

[cc lang=”css”]
a:link
{
CSS Style Here
}
a:visited
{
CSS Style Here
}
a:focus
{
CSS Style Here
}
a:hover
{
CSS Style Here
}
a:active
{
CSS Style Here
}
[/cc]

Note: If you want to apply special styling to the hover state of a link that also has keyboard input focus, use [code]a:focus:hover[/code].