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.

🤖

ChatGPT Free
Ask questions on any topic

CITE ARTICLE


For homework, research, thesis, books, magazines, blogs or academic articles

APA Format Reference:

Delgado, Hugo. (2019).
Pseudo CSS classes - link, visited, focus, hover and active.
Retrieved Dec 14, 2024, from
https://disenowebakus.net/en/pseudo-classes-css

Participates!

Share it with your friends 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.

CONTINUE LEARNING

IT ALSO DESERVES TO PAY TO VISIT:

Not finding what you need?

Use our internal search to discover more information
Related content:

Would you like to learn more about Web Design?

Meet all the courses and tutorials that we have for you completely free
Learn Web Design
 

Leave your Comment

SPONSOR

Your business can also appear here. More information

Next article:

Your browser has blocked advertising.
Please 🙏 Allows you to view the ads to access, thank you.