CSS Pseudo‑classes

What Are Pseudo‑classes?

Pseudo‑classes are predefined keywords in CSS that let you style elements based on their state or position in the DOM.

  • They always start with a colon (:).
  • They extend normal selectors to handle dynamic situations (like hover, focus, or visited links).
  • They’re incredibly useful for styling interactive elements, form states, and specific children in a list.

Commonly Used Pseudo‑classes

Here are some of the most popular pseudo‑classes you’ll encounter:

Pseudo Classes
Pseudo‑classTargets
:activeAn element being activated (e.g., clicked). Often used on links or buttons.
:checkedA checkbox, radio, or option that is selected.
:defaultThe default option in a group of choices.
:disabledA disabled form element.
:emptyAn element with no children.
:enabledAn enabled form element (opposite of :disabled).
:first-childThe first child among siblings.
:focusThe element currently focused (e.g., input field).
:hoverAn element hovered with the mouse.
:last-childThe last child among siblings.
:linkA link that has not been visited.
:not()Any element not matching the selector inside. Example: :not(span).
:nth-child()An element at a specific position among siblings.
:nth-last-child()Same as above, but counting from the end.
:only-childAn element with no siblings.
:requiredA form element with the required attribute.
:rootThe root element (). Useful for CSS variables.
:targetThe element matching the current URL fragment (e.g., #section).
:validA form element that passes client‑side validation.
:visitedA link that has already been visited.

Example: Styling Links Across States

If you style links with a simple rule:

Code Block Loading...

It looks fine until you click a link. Suddenly, the browser applies its default styles for :active and :visited, turning the link blue or purple.

To keep links consistently yellow across all states:

Code Block Loading...

This ensures the style persists whether the link is unvisited, clicked, or already visited.

Special Mention: :nth-child()

The :nth-child() pseudo‑class is especially powerful:

  • Odd/even rows:

Code Block Loading...

  • First 3 children:

Code Block Loading...

  • Every 5th element:

Code Block Loading...

This makes it easy to create zebra‑striped tables, highlight specific items, or apply repeating patterns.

Print‑specific Pseudo‑classes

CSS also includes pseudo‑classes for paged media (like printing):

  • :first → Targets the first page.
  • :left → Targets all left pages.
  • :right → Targets all right pages.

These are useful when styling printed documents differently depending on page position.

Key Takeaways

  • Pseudo‑classes let you style elements based on state (hover, focus, visited) or position (first child, nth child).
  • Always combine link states (a, a:visited, a:active) to ensure consistent styling.
  • :nth-child() is versatile for odd/even rows, ranges, or repeating patterns.
  • Some pseudo‑classes are specialized for forms (:required, :valid) or printing (:first, :left, :right).

Example

Code Block Loading...