CSS: Pseudo Class Selector

Pseudo-class selectors in CSS are used to define the special state of an element. For example, they can style an element when a user mouses over it, style visited and unvisited links differently, or style an element when it gets focused.

The syntax for pseudo-classes is selector:pseudo-class { property: value; }.

Here are some common pseudo-classes and their uses:

• :hover: Applies when the user designates an element (with some pointing device), but does not necessarily activate it.
• :focus: Applies while an element has the focus (accepts keyboard or mouse events, or other forms of input).
• :active: Applies when an element is being activated by the user.
• :visited and :link: Apply to links that the user has visited and links that have not been visited, respectively.
• :first-child: Matches a specified element that is the first child of another element.
• :lang(): Matches elements based on the language attribute.

For example, to change the color of a link when it’s hovered over, you would write:

CSS

a:hover {
  color: blue;
}

Pseudo-classes can be combined with other selectors, like class selectors, to increase specificity. For instance:

CSS

a.highlight:hover {
  color: red;
}

This will change the color of a link to red when it’s hovered over, but only if it also has the highlight class.