Pseudo CSS classes - link, visited, focus, hover and active

The most used pseudo class is, undoubtedly, the one that allows you to represent the different states of the hyperlinks:

/* shows the links in blue not visited */
a:link {
color: #006;
}

/* shows in gray the links visited */
a:visited {
color:#999;
}

/* shows the focused links in light red */
a:focus {
color: #f00;
}

/* shows in red the links in hover */
a:hover {
color:#a00;
}

/* shows the active links in light red */
a:active {
color:#f00;
}

Note that pseudo classes are not added with a single dot to the element selector but with two periods (:)

The default pseudo classes can be linked to the classes defined by the user:

a.blue:visited {
color: #006;
}

: link and: visited are pseudo link classes and can only be assigned to the anchor element (<a>) :hover, : active and :active and :focus are pseudo dynamic classes that, in theory, can be assigned to any element.

With the pseudo classes for links we must take into account a particularity, namely that the order is correct. An adequate order of the instructions can mean that a particular state is never evaluated because it is overwritten by one of the states defined below.

A secure order is the following:

:link - :visited - :focus - :hover - :active

Pseudo classes can also be combined. In theory, the following instruction is also possible:

a:focus:hover {…}

The instruction is applied when the link is focused (with the keyboard) and the pointer passes over it.

Another pseudo class is the language, which allows you to identify an element in which the language used is different from the rest of the document.

#languageselection p:lang(es) {…}

The previous line would mean, for example, that the paragraph <p> within #languageselection is written in Spanish.