CSS Pseudo-Classes and Pseudo-Elements: The Complete Guide

By Rahul — Google Frontend Engineer

The Difference

• Pseudo-classes (single colon :) select elements in a specific STATE: :hover, :focus, :first-child
• Pseudo-elements (double colon ::) create VIRTUAL elements: ::before, ::after, ::placeholder

Common Pseudo-Classes

State-based

Structural

Negation and Selection

Common Pseudo-Elements

Real-World Patterns

Custom Checkbox

Tooltip with ::after

Production Tips

• ::before and ::after require the content property (even if empty: content: '')
• :focus-visible is better than :focus for keyboard accessibility — it does not show outlines on mouse clicks
• :has() is the "parent selector" CSS never had — use it for conditional parent styling
• Pseudo-elements cannot be added to void elements (img, input, br)

Summary

Pseudo-classes select states (:hover, :nth-child). Pseudo-elements create virtual elements (::before, ::after). The :has() pseudo-class is a game-changer for parent-based styling. Master these and you can build complex UI without extra HTML or JavaScript.