CSS Pseudo-Classes

Subject: css

CSS Pseudo-Classes

CSS Pseudo-Classes allow you to style HTML elements based on their state, position, or user interaction—without needing to add extra classes or JavaScript. Pseudo-classes start with a colon (:) and are used alongside selectors.

They are essential for interactive designs like hover effects, form field styling, and conditional formatting.

Syntax

🚀 Try it in Compiler

Example: Styling with Pseudo-Classes

🚀 Try it in Compiler

More Useful Pseudo-Classes

  • :disabled, :enabled – Target form elements based on their state.
  • :not(selector) – Select elements not matching the specified selector.
  • :empty – Select elements with no children.
  • :visited, :link – Style links based on whether they’ve been visited.

Key Takeaways

  • Pseudo-classes are dynamic selectors that let you style elements based on user interaction or element structure.
  • :hover, :focus, and :active are widely used for UI interactivity.
  • Structural pseudo-classes like :first-child and :nth-child() help with layout control.
  • Use pseudo-classes to write cleaner CSS without extra HTML classes.
  • Combine them with normal selectors to create powerful UI effects.
Next: CSS Pseudo-Elements