CSS Pseudo-classes

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

The syntax of pseudo-classes:

selector:pseudo-class {
  property: value;
}

Anchor Pseudo-classes

Links can be styled differently depending on what state they are in.

The :hover Pseudo-class on <div>

You can use the :hover pseudo-class on all elements, not only on links.

The :first-child Pseudo-class

The :first-child pseudo-class matches a specified element that is the first child of another element.