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;
}

PreviousCSS Attribute Selectors NextCSS Pseudo Elements

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)

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>

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

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

CSS Pseudo Classes

Syntax

Attributes

Match elements that are currently open

Example

Browser Support

Notes

Popular Pseudo Classes

Conclusion