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

selector:pseudo-class {
  property: value;
}

Common Pseudo-classes

1. :link: Selects all unvisited links.
2. :visited: Selects all visited links.
3. :hover: Selects elements when mouse is over them.
4. :active: Selects the active element.
5. :focus: Selects the element that has focus (e.g., input field).
6. :first-child: Selects every element that is the first child of its parent.
7. :last-child: Selects every element that is the last child of its parent.
8. :nth-child(n): Selects every element that is the nth child of its parent.

Example - Simple Tooltip Hover

div {
  display: none;
}
p:hover div {
  display: block;
}

The :first-child Pseudo-class

Matches a specified element that is the first child of another element.

p:first-child {
  color: blue;
}

Matches the first <p> element in all <div> elements:

div p:first-child {
  background-color: yellow;
}