Select Page

Pseudo-classes

by | Sep 28, 2018 | Programming |

Pseudo-classes
6+

A pseudo-class is used to define a special state of an element. For example, it can be used to:

  • Style an element when a user mouses over it
  • Style visited and unvisited links differently
  • Style an element when it gets focus

Syntax

You can specify a pseudo-classes as follows:

Anchor Pseudo-classes

Links can be displayed in different ways using pseudo classes. Want to change the color of link on mouse hover or after a visit or when link gets active by mouse click, that’s how you can do it:

You must note that a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective! a:active MUST come after a:hover in the CSS definition in order to be effective!

Pseudo-class names are not case-sensitive.

Pseudo-classes can be combined with CSS classes. When you hover over the link in the example, it will change color:

You can change the color of <div> using :hover pseudo-class as well:

6+