Bugl — Daily coding puzzles and drills

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

Formula

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

selector:pseudo-class-name {

CSS properties

Mouse Over Me

Interactive Pseudo-classes

Formula

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

Formula

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

Formula

:first - child

First child of a parent

Formula

:last - child

Last child of a parent

Formula

:nth - child(n)

The nth child of a parent :lang() - Elements with a specific language

CSS Pseudo-classes Reference

Formula

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