❮ Previous Next ❯

CSS Pseudo-classes

  • Learn CSS pseudo-classes to style elements based on their state or position dynamically.

  • What Are CSS Pseudo-classes?

    CSS pseudo-classes are special keywords added to selectors that let you style elements based on their current state, not just their tag or class.

    In simple words:

    Pseudo-classes change styles when something happens to an element.

    They do not create new elements.
    They only apply styles temporarily, based on interaction or state.

    Why CSS Pseudo-classes Are Important

    Without pseudo-classes:

    No interaction feedback
    Users don’t know what’s clickable
    Poor accessibility and UX

    With pseudo-classes:

    Interactive interfaces
    Clear visual feedback
    Better accessibility
    Professional user experience

    Real-life comparison:
    A button lighting up when you touch it - that glow says “Yes, this works.”

  • Commonly Used Pseudo-classes (In Depth) 

    In this lesson, we focus on interaction-based pseudo-classes:

    :hover

    :focus

    :active

    :hover - Mouse-Over State

    What it does:

    :hover applies styles when the user places the mouse pointer over an element.

:hover Pseudo-Class

:hover applies styles when the user moves the mouse over an element. 

button:hover {
  background-color: blue;
  color: white;
}
  • Style applies only while hovering

:hover Practical Example

When the user moves the mouse over the button, the :hover styles are applied. 

<!DOCTYPE html>
<html>
<head>
    <title>Hover Example</title>
    <style>
        button {
            padding: 10px 15px;
        }

        button:hover {
            background-color: blue;
            color: white;
        }
    </style>
</head>
<body>
    <button>Hover Me</button>
</body>
</html>

  • Where :hover Is Commonly Used

    • Buttons
    • Links
    • Cards
    • Menu items

    Real-life comparison:
    Elevator buttons glowing when your finger gets close.

    • Works best on desktop
    • Mobile devices have limited hover behavior
    • Should never be the only feedback method

    :focus - Keyboard / Input Focus State

    What it does:

    :focus applies when an element:

    • Is clicked
    • Is selected using the keyboard (Tab key)

:focus Pseudo-Class

:focus Pseudo-Class 

input:focus {
  border: 2px solid green;
  outline: none;
}
  • Clearly shows the active input field

:focus Practical Example

:focus Practical Example 

<!DOCTYPE html>
<html>
<head>
    <title>Focus Example</title>
    <style>
        input {
            padding: 8px;
        }

        input:focus {
            border: 2px solid green;
            outline: none;
        }
    </style>
</head>
<body>
    <input type="text" placeholder="Enter name">
</body>
</html>

  • Why :focus Is VERY IMPORTANT

    Essential for keyboard users
    Required for accessibility (WCAG standards)
    Improves usability for all users

    Real-life comparison:
    A blinking cursor inside a text box showing where you’re typing.

    Bad Practice (Avoid This)

    input:focus {

      outline: none;

    }

    Removing focus styles without replacement breaks accessibility.

    Always replace the outline with a custom focus style if you remove it.

    :active - Clicked State

    What it does:

    :active applies while the element is being clicked
     (from mouse-down to mouse-up).

:active Pseudo-Class

:active applies styles while an element is being clicked (from mouse-down to mouse-up). 

button:active {
  transform: scale(0.95);
}
  • Creates a pressed-button effect

:active Practical Example

When the button is pressed (mouse-down), the :active style is applied temporarily. 

<!DOCTYPE html>
<html>
<head>
    <title>Active Example</title>
    <style>
        button {
            padding: 10px 15px;
            cursor: pointer;
        }

        button:active {
            transform: scale(0.95);
        }
    </style>
</head>
<body>
    <button>Click Me</button>
</body>
</html>

  • Real-life comparison:
    A doorbell visibly pressed down when clicked.

    What Happens?

    Hover → blue text
    Focus → orange outline
    Active → red text

    Pseudo-classes vs Normal Classes

    Pseudo-classNormal Class
    State-basedManually added
    Auto-appliedDeveloper-controlled
    TemporaryPermanent

    Order of Pseudo-classes

    For interactive elements, follow this order:

    :hover

    :focus

    :active

    This prevents unexpected style overrides.

Accessible Button with Interactive States

This example shows how :hover, :focus, and :active improve usability, accessibility, and user feedback for a button. 

<!DOCTYPE html>
<html>
<head>
    <title>Accessible Button Example</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 40px;
        }

        .btn {
            padding: 10px 20px;
            border: none;
            background-color: #1a73e8;
            color: white;
            cursor: pointer;
            font-size: 16px;
        }

        .btn:hover {
            background-color: #1558b0;
        }

        .btn:focus {
            outline: 3px solid orange;
        }

        .btn:active {
            transform: scale(0.95);
        }
    </style>
</head>
<body>
    <button class="btn">Submit</button>
</body>
</html>

  • Smooth hover feedback
    Visible focus ring
    Click animation
    Fully accessible button

    Common Mistakes

    Styling :hover but ignoring :focus
    Removing outlines without replacement
    Expecting hover to work on mobile
    Overusing strong :active effects

    Best Practices for CSS Pseudo-classes

    Always style :focus for accessibility
    Use :hover for visual feedback
    Keep :active effects subtle
    Test using keyboard navigation
    Combine with transitions for smooth UX

    • Hover → user interest
    • Focus → user control
    • Active → user action
    • Feedback → user confidence

    Pseudo-classes style elements based on state
    :hover, :focus, :active are most common
    Improve interactivity and accessibility
    Essential for modern UI design
    Frequently asked interview topic

❮ Previous Next ❯