Pseudo-Classes Overview

Pseudo-classes are selectors that target elements in specific states or relationships, like :hover, :focus, :first-child. They're preceded by a single colon. Pseudo-classes don't match new elements; they change matching based on state.

Common Pseudo-Classes

Pseudo-Class	Matches	Example
:hover	Element on hover	a:hover
:focus	Element with focus	input:focus
:active	Element being clicked	button:active
:first-child	First child of parent	li:first-child
:last-child	Last child of parent	li:last-child
:nth-child()	Specific position	li:nth-child(2)

CSS

/* State pseudo-classes */
a {
  color: blue;
}

a:hover {
  color: red;
  /* When cursor hovers */
}

input:focus {
  border: 2px solid blue;
  /* When input has focus */
}

button:active {
  opacity: 0.8;
  /* While being clicked */
}

/* Position pseudo-classes */
li:first-child {
  font-weight: bold;
}

li:last-child {
  margin-bottom: 0;
}

li:nth-child(odd) {
  background-color: #f9f9f9;
}

Note

Pseudo-classes match elements in specific states or positions. They help style interactive states (:hover, :focus) and structural relationships (:first-child, :nth-child).

Pseudo-elements overview: [Pseudo-Elements Overview](/css/pseudo-elements-intro).