← Back to home

CSS Pseudo-classes & Elements

Browse all CSS pseudo-classes and pseudo-elements with syntax, examples, and practical developer notes.

25 entries

:active

Applies styles while an element is being activated, such as when a button is pressed.

User Action

:checked

Applies styles to checked checkboxes, radio buttons, or selected options.

Form

:disabled

Selects form elements that are disabled and cannot be interacted with.

Form

:empty

Selects elements that have no children, including no text nodes.

Structural

:first-child

Selects an element that is the first child of its parent.

Structural

:focus

Applies styles when an element has received focus, typically via keyboard or click.

User Action

:focus-visible

Applies styles only when focus should be visibly indicated, such as keyboard navigation.

User Action

:focus-within

Applies styles to an element when it or any of its descendants has focus.

User Action

:has()

Selects an element if it contains a child matching the given selector — the CSS parent selector.

Logical

:hover

Applies styles when the user moves their pointer over an element.

User Action

:invalid

Selects form elements whose value fails validation constraints.

Form

:is()

Matches elements that match any selector in a given list, reducing repetition.

Logical

:last-child

Selects an element that is the last child of its parent.

Structural

:not()

Selects elements that do not match the given selector.

Logical

:nth-child()

Selects elements based on their position among siblings.

Structural

:nth-of-type()

Selects elements based on their position among siblings of the same type.

Structural

:optional

Selects form elements that do not have the required attribute.

Form

::placeholder

Styles the placeholder text inside input and textarea elements.

Form

:read-only

Selects elements that cannot be modified by the user.

Form

:required

Selects form elements that have the required attribute set.

Form

:root

Selects the highest-level parent element in the document, typically the html element.

Structural

:target

Selects the element whose ID matches the current URL fragment.

UI State

:valid

Selects form elements whose value passes validation constraints.

Form

:visited

Applies styles to links that the user has already visited.

User Action

:where()

Same as :is() but with zero specificity, making it easy to override.

Logical