CSS Pseudo-classes

In CSS, pseudo-class is a keyword incorporated into a selector for specifying a particular state of your chosen HTML element(s). Pseudo-classes not only allows designers to apply a style to their element relative to the content in the document, but also for peripheral factors such as the history of the navigator (using :visited), the status of any web content (such as :checked which worked on certain HTML form elements), or action as per positioning of the mouse (using :hover).

Here are some common uses of CSS pseudo-classes:

  • When a user moves the mouse over a specific HTML element, then apply the style to that particular element.
  • To apply a different style for user-visited and user-unvisited HTML anchors.
  • For applying a style to a user-focused element.
  • Selects the first letter or the first line of text in the HTML element.

The basic syntax of using pseudo-class is:

selector : pseudo-class{
     property : value;

Some of the Popular Pseudo-Classes:

Here are some commonly used "pseudo-classes" listed below:

:hoverIt is implemented for adding a particular effect to any HTML element as you move the mouse pointer over it.
:activeIt is implemented for choosing an HTML element that is activated as soon as the user clicks it.
:focusIt is implemented for selecting an element that is currently focused on by its user.
:visitedIt is implemented for selecting the links that have been previously visited by the user.

There are about 60 different types of standard "pseudo-classes" available in CSS, which we will study in further chapters.

Scroll Back to Top