CSS Pseudo-classes and Pseudo-elements

Pseudo-classes and pseudo-elements both let you style things that plain selectors can't reach directly — a particular state of an element, or a specific part of it that doesn't correspond to an actual HTML tag. They look similar in syntax but serve distinct purposes, and mixing them up is one of the most common small mistakes in CSS.

Pseudo-classes (single colon, e.g. :hover) target an element in a particular state or position, while pseudo-elements (double colon, e.g. ::before) target a specific sub-part of an element that isn't represented by its own tag in the HTML.

Why it matters

Pseudo-classes style an element according to its state or position: hovered, focused, the first child, every other row. Pseudo-elements style a part of an element or add decoration without extra markup. Together they remove the need for a great many helper classes and bits of JavaScript.

Common Pseudo-classes

Pseudo-classes describe a condition or state that an element is currently in.

• :hover — applies while the user's pointer is over the element.
• :focus — applies while the element has keyboard or click focus, essential for accessible forms and interactive elements.
• :nth-child(n) — matches an element based on its numeric position among its siblings, accepting a number, a keyword (odd, even), or a formula (2n+1); useful for zebra-striping table rows or grid items.
• :first-child / :last-child — match an element only if it is, respectively, the first or last child of its parent.

Common Pseudo-elements

Pseudo-elements target a portion of an element rather than the whole thing.

• ::before / ::after — insert generated content immediately before or after an element's actual content, most often used with the content property for decorative icons, quotes, or visual flourishes without extra HTML markup.
• ::first-line / ::first-letter — target just the first line or first letter of a text block, commonly used for drop caps or stylized intros.
• ::placeholder — styles the placeholder text of a form input.

The Single-Colon vs. Double-Colon Convention

Modern CSS uses a single colon for pseudo-classes (:hover, :focus, :nth-child) and a double colon for pseudo-elements (::before, ::after, ::first-line) to make the distinction explicit. For backward compatibility, browsers still accept a single colon for the older pseudo-elements (:before, :after) from CSS2, but the double-colon syntax is the current standard and should be preferred in new code.

Examples

.link {
  position: relative;
  text-decoration: none;
}

.link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background: currentColor;
  transition: width 0.25s ease;
}

.link:hover::after {
  width: 100%;
}

An underline (generated purely with CSS, no extra markup) grows smoothly from 0 to full width beneath the link text whenever the user hovers over it.

tr:nth-child(even) {
  background-color: #f7f7f7;
}

tr:nth-child(odd) {
  background-color: #ffffff;
}

Table rows alternate between light gray and white backgrounds automatically based on their position, with no need to manually add a class to every other row.

Exercise

Make the button's background gold while it is hovered. Give the button a 3px solid orange outline when it is focused with the keyboard. Make the first letter of the paragraph twice as large and bold. Add an asterisk after the heading text using CSS only.

Expected result: a large first letter, a heading followed by an asterisk, and a button that reacts to hover and to keyboard focus.

/* The page contains: <main> with an <h1>, a <p> and a <button> */

/* TODO: button background on hover */

/* TODO: button outline on keyboard focus */

/* TODO: first letter of the paragraph */

/* TODO: an asterisk after the heading */

/* The page contains: <main> with an <h1>, a <p> and a <button> */

button:hover {
  background: gold;
}

button:focus-visible {
  outline: 3px solid orange;
}

p::first-letter {
  font-size: 2em;
  font-weight: bold;
}

h1::after {
  content: " *";
}

Quick quiz

Interview questions