Pseudo selectors in CSS

Pseudo Selectors in CSS are used to select HTML elements based on their current status and apply styles to them.

Syntax of pseudo-selectors

selector: pseudo-class keyword
{
declaration list;
}

It selects any HTML element targeted by the selector and applies specified styles based on the pseudo-class keyword used.

The syntax for “hover” pseudo selector

selector: hover
{
declaration list;
}

It selects any HTML element targeted by the selector if its status is hovered (on mouse over)

Example:

CSS:

a: hover
{
background-color: orange;
}

HTML:

<a href="#">Click Here</a>

Output:

It selects any anchor element if its status has hovered, the background color of the anchor link will change to orange. See the above output, the mouse hover is present, so the background color is displayed as orange color.