Understand Before You Build

  • HTML
    • Form
    • HTML pattern Attribute
  • CSS
    • inset
    • scroll-snap-type
    • margin-inline
    • Content-visibility
    • Scroll-Driven Animations
    • Isolation
    • @Container
    • @layer
    • :not()
    • :is()
    • :Where()
    • :has()
    • :target
    • backdrop-filter
    • :root
    • Color-scheme
    • Animations
    • Selectors
    • Object-fit
    • Logical Pseudo-Classes
    • :scope
    • Properties
    • Performance
    • Aspect-ratio
    • State Pseudo-Classes
    • Positioning
    • Resize
    • Structural Pseudo-Classes
    • Responsive Design
    • Units
    • Root & Scope Selectors
    • Scrolling
    • At-Rules
    • Target & URL Selectors
    • Spacing
    • Functions
    • Attribute Selectors
    • Layouts
    • Basic Selectors
    • Filters & Effects
    • Colors & Typography
    • Flexbox
    • Combinator Selectors
    • Grid
    • Form & UI State Selectors
    • AI CSS Generator
  • Sass
    • Variables
    • Nesting
    • Mixins
    • Reusable styles
    • Large project management
  • CSS Frameworks
    • Material UI
    • Bootstrap
    • Tailwind CSS
  • React UI
    • Performance Optimization
    • React.memo
    • useMemo
    • useCallback
    • Lazy Loading
    • Code Splitting
    • Virtual DOM Optimization
    • Preventing Re-renders
    • Props & State
    • Hooks
    • Component-based architecture
    • State-driven UI updates
  • Figma
    • Design systems
    • Tokens
    • Variables
    • Auto layout
    • Component variants
    • Design handoff
    • UI consistency

State Pseudo-Classes

State pseudo-classes are used to style elements based on their current state or user interaction.

These selectors make websites more interactive and user-friendly.

State pseudo-classes are commonly used in:

  • Buttons
  • Forms
  • Navigation menus
  • Interactive UI components
  • Validation systems

Common State Pseudo-Classes

Selector Purpose
:hover Mouse hover state
:focus Focused element
:active Active clicked state
:visited Visited links
:checked Checked input state
:disabled Disabled form fields
:enabled Enabled form fields
:required Required form fields
:valid Valid form inputs
:invalid Invalid form inputs
:placeholder-shown Placeholder visible state

1. :hover

Applies styles when the mouse hovers over an element.

[code theme="dark"] button:hover{ background:blue; } [/code]

2. :focus

Styles elements when focused using keyboard or mouse.

[code theme="dark"] input:focus{ border-color:blue; } [/code]

3. :active

Applies styles while an element is being clicked.

[code theme="dark"] button:active{ transform:scale(.95); } [/code]

4. :visited

Styles links that the user already visited.

[code theme="dark"] a:visited{ color:purple; } [/code]
Visited Link

5. :checked

Targets checked radio buttons or checkboxes.

[code theme="dark"] input:checked{ accent-color:blue; } [/code]

6. :disabled

Styles disabled form elements.

[code theme="dark"] input:disabled{ opacity:.5; } [/code]

7. :enabled

Targets enabled form fields.

[code theme="dark"] input:enabled{ background:white; } [/code]

8. :required

Targets required form fields.

[code theme="dark"] input:required{ border-left:4px solid red; } [/code]

9. :valid

Styles valid form fields.

[code theme="dark"] input:valid{ border-color:green; } [/code]

10. :invalid

Styles invalid form fields.

[code theme="dark"] input:invalid{ border-color:red; } [/code]

11. :placeholder-shown

Targets inputs displaying placeholder text.

[code theme="dark"] input:placeholder-shown{ background:#f3f4f6; } [/code]

State Selector Comparison

Selector Trigger
:hover Mouse hover
:focus Input focus
:checked Checkbox/radio selected
:valid Valid form value

Advantages of State Pseudo-Classes

  • Improves interactivity
  • Better user experience
  • No JavaScript required for many UI states
  • Useful for forms and accessibility
  • Creates responsive feedback systems

Disadvantages

  • Complex states may require careful testing
  • Some states behave differently on touch devices
  • Overusing effects may reduce usability

Cross Browser Compatibility

State pseudo-classes are fully supported across all modern browsers.