CSS Selectors

CSS Pseudo Classes

Written by Swapnil RajaUpdated 30 Jul 2026

CSS Pseudo Classes are used to define a special state of an HTML element.

They allow you to style elements based on:

User interaction
Element position
Form state
Dynamic conditions

Pseudo classes start with a colon (:) and are widely used to create interactive and responsive user interfaces. The supporting concepts are explained in CSS Attribute Selectors and CSS Pseudo Elements.

Common examples include:

:hover
:focus
:first-child
:last-child
:nth-child()

Syntax

CSS Pseudo Classes Syntax

css

selector:pseudo-class {
    property: value;
}

CSS Pseudo Classes Example

css

a:hover {
    color: red;
}

Changes the link color when the mouse pointer hovers over it.

Attributes

Pseudo Class	Description	Example
:hover	Styles an element when hovered	a:hover
:focus	Styles an element when focused	input:focus
:first-child	Selects the first child element	p:first-child
:last-child	Selects the last child element	p:last-child
:nth-child()	Selects a specific child	li:nth-child(2)

Match elements that are currently open

The :open pseudo-class matches elements with an open and closed state, including <details>, <dialog>, and supported picker controls. It describes the live state rather than the presence of an HTML attribute, so it remains accurate when the state changes through user interaction or browser behavior.

Focused example

css

details:open {
  border-color: #2563eb;
}

dialog:open {
  opacity: 1;
  transform: translateY(0);
}

Example

CSS Pseudo Classes Complete Example

html

<!DOCTYPE html>
<html>
<head>
    <title>CSS Pseudo Classes Example</title>
    <style>
        a:hover {
            color: red;
        }
        input:focus {
            border: 2px solid blue;
            outline: none;
        }
        li:first-child {
            color: green;
            font-weight: bold;
        }
        li:last-child {
            color: orange;
        }
        li:nth-child(2) {
            color: purple;
        }
    </style>
</head>
<body>
    <a href="#">Hover over this link</a>
    <br><br>
    <input type="text" placeholder="Click here">
    <br><br>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>React</li>
    </ul>
</body>
</html>

Browser Support

Feature	Chrome	Edge	Firefox	Safari
:hover	1	12	1	2
:open	133	133	136	26.5

Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8.

Notes

Pseudo classes are dynamic and respond to user actions.
:hover is commonly used for buttons, links, and menus.
:focus improves accessibility and form usability.
:nth-child() supports formulas.

Example:

nth-child Formula Example

css

li:nth-child(odd) {
    background-color: #f5f5f5;
}

Styles all odd-numbered list items.

Popular Pseudo Classes

Pseudo Class	Use Case
:hover	Mouse interaction
:focus	Active form field
:active	Clicked element
:first-child	First item in a group
:last-child	Last item in a group
:nth-child()	Specific item selection

Conclusion

CSS Pseudo Classes allow you to style elements based on their state, position, or user interaction. They are essential for creating interactive, accessible, and visually engaging websites without using JavaScript.

PreviousCSS Attribute Selectors NextCSS Pseudo Elements