CSS Pseudo-classes

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

Example 1: Syntax

The syntax of pseudo-classes:

selector:pseudo-class {
  property: value;
}

Example 2: Anchor Pseudo-classes

Links can be displayed in different ways:

Example 3: :hover on <div>

The :hover pseudo-class can be used on other elements as well.

Example 4: Simple Tooltip Hover

Hover over a <div> element to show a <p> element (like a tooltip).

Example 5: :first-child Pseudo-class

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

a:hover {
  color: #FF00FF;
}

div:hover {
  background-color: blue;
}

p:first-child {
  color: blue;
}