CSS References
CSS Pseudo-classes Reference
A pseudo-class is a keyword added to a selector that targets elements in a special state — being hovered, focused, checked, or occupying a particular position among siblings. Pseudo-classes start with a single colon. This reference groups them into interaction, structural, form and logical categories, each with an example.
Interaction (user action) pseudo-classes
| Pseudo-class | Example | Description |
|---|---|---|
| :hover | a:hover | Element the pointer is currently over. |
| :focus | input:focus | Element that has keyboard/programmatic focus. |
| :focus-within | form:focus-within | Element containing a focused descendant. |
| :focus-visible | button:focus-visible | Focused element that should show a focus ring (usually keyboard). |
| :active | button:active | Element being activated (pressed). |
| :visited | a:visited | A link the user has already visited. |
| :link | a:link | An unvisited link. |
| :target | :target | Element whose id matches the current URL fragment. |
Structural pseudo-classes
| Pseudo-class | Example | Description |
|---|---|---|
| :root | :root | The root element (<html>); ideal for custom properties. |
| :first-child | li:first-child | First child among its siblings. |
| :last-child | li:last-child | Last child among its siblings. |
| :only-child | p:only-child | An element with no siblings. |
| :nth-child(n) | li:nth-child(2n) | Matches by position; accepts even, odd, 3n+1, etc. |
| :nth-last-child(n) | li:nth-last-child(1) | Position counted from the end. |
| :first-of-type | p:first-of-type | First element of its type among siblings. |
| :last-of-type | p:last-of-type | Last element of its type among siblings. |
| :nth-of-type(n) | p:nth-of-type(odd) | Matches by position among the same element type. |
| :only-of-type | img:only-of-type | The only element of its type among siblings. |
| :empty | div:empty | An element with no children or text. |
Form and input pseudo-classes
| Pseudo-class | Example | Description |
|---|---|---|
| :checked | input:checked | A checked checkbox, radio or selected option. |
| :disabled | input:disabled | A disabled form control. |
| :enabled | input:enabled | An enabled form control. |
| :required | input:required | A control with the required attribute. |
| :optional | input:optional | A control without the required attribute. |
| :valid | input:valid | A control whose value passes validation. |
| :invalid | input:invalid | A control whose value fails validation. |
| :in-range | input:in-range | A number/date within its min–max range. |
| :out-of-range | input:out-of-range | A value outside its allowed range. |
| :read-only | input:read-only | A control the user cannot edit. |
| :placeholder-shown | input:placeholder-shown | An input currently showing its placeholder. |
| indeterminate | :indeterminate | A checkbox/radio in an indeterminate state. |
Logical and other pseudo-classes
| Pseudo-class | Example | Description |
|---|---|---|
| :not(x) | p:not(.lead) | Matches elements that do NOT match selector x. |
| :is(a, b) | :is(h1, h2) a | Matches if the element matches any selector in the list. |
| :where(a, b) | :where(h1, h2) a | Like :is() but adds zero specificity. |
| :has(x) | article:has(img) | Parent selector — matches if it contains x. |
| :lang(x) | p:lang(fr) | Elements in a particular language. |
| :default | button:default | The default control in a form or group. |
| :dir(x) | :dir(rtl) | Elements with a given text direction. |
💡
Order link pseudo-classes as :link, :visited, :hover, :active (LoVe-HAte) so later rules correctly override earlier ones.
ℹ️
:has() is the long-awaited parent selector and is now supported in all modern browsers, enabling styles that react to an element's contents.