CSS Pseudo-classes

A CSS pseudo-class is a keyword that can be added to a selector, to define a style for a special state of an element.

Some common use for pseudo-classes:

• Style an element when a user moves the mouse over it

• Style visited and unvisited links differently

• Style an element when it gets focus

• Style valid/invalid/required/optional form elements

• Style an element that is the first child of its parent

Syntax

Pseudo-classes are always denoted by a single colon (:) followed by the pseudo-class name:

Example

selector:pseudo-class-name {
  CSS properties
}

Mouse Over Me

Interactive Pseudo-classes

Interactive pseudo-classes apply styles based on user interaction:

• :hover - When mouse is over an element

• :focus - When an element has focus

• :active - When an element is being activated

• :link - Unvisited links

• :visited - Visited links

Structural Pseudo-classes

Structural pseudo-classes select elements based on their position in the document tree:

• :first-child - First child of a parent

• :last-child - Last child of a parent

• :nth-child(n) - The nth child of a parent

• :lang() - Elements with a specific language

CSS Pseudo-classes Reference

For a complete list of all CSS Pseudo-classes, visit our CSS Pseudo-classes Reference.