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.
:checked
Applies styles to checked checkboxes, radio buttons, or selected options.
:disabled
Selects form elements that are disabled and cannot be interacted with.
:empty
Selects elements that have no children, including no text nodes.
:first-child
Selects an element that is the first child of its parent.
:focus
Applies styles when an element has received focus, typically via keyboard or click.
:focus-visible
Applies styles only when focus should be visibly indicated, such as keyboard navigation.
:focus-within
Applies styles to an element when it or any of its descendants has focus.
:has()
Selects an element if it contains a child matching the given selector — the CSS parent selector.
:hover
Applies styles when the user moves their pointer over an element.
:invalid
Selects form elements whose value fails validation constraints.
:is()
Matches elements that match any selector in a given list, reducing repetition.
:last-child
Selects an element that is the last child of its parent.
:not()
Selects elements that do not match the given selector.
:nth-child()
Selects elements based on their position among siblings.
:nth-of-type()
Selects elements based on their position among siblings of the same type.
:optional
Selects form elements that do not have the required attribute.
::placeholder
Styles the placeholder text inside input and textarea elements.
:read-only
Selects elements that cannot be modified by the user.
:required
Selects form elements that have the required attribute set.
:root
Selects the highest-level parent element in the document, typically the html element.
:target
Selects the element whose ID matches the current URL fragment.
:valid
Selects form elements whose value passes validation constraints.
:visited
Applies styles to links that the user has already visited.
:where()
Same as :is() but with zero specificity, making it easy to override.