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

The pseudo CSS classes allow you to select elements by applying criteria that can not be extracted directly from the source code.

Pseudo CSS classes - link, visited, focus, hover and active | Learn CSS | The pseudo CSS classes allow you to select elements by applying criteria that can not be extracted directly from the source code

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.

Did you like it or was it useful?

Help us share it in Social Networks

Professor at the University of Guadalajara

Hugo Delgado Desarrollador y Diseñador Web en Puerto Vallarta

Professional in Web Development and SEO Positioning for more than 10 continuous years.
We have more than 200 certificates and recognitions in the Academic and Professional trajectory, including diploma certificates certified by Google.

IT ALSO DESERVES TO PAY TO VISIT:

Not finding what you need?

Use our internal search to discover more information
Sponsored content:
 

Leave your Comment

SPONSOR

Your business can also appear here. More information

Recommended: