Syntax
:hover, :focus, :active, :visitedExamples
The Interaction State Order
A button styled across its different interactive states.
.button {
background: #3b82f6;
transition: background 0.15s ease;
}
.button:hover {
background: #2563eb;
}
.button:focus {
outline: 2px solid #93c5fd;
outline-offset: 2px;
}
.button:active {
background: #1d4ed8;
}Styling Visited Links
A subtle way to indicate previously-visited pages.
a:visited {
color: #6b21a8; /* a slightly muted purple, distinct from the unvisited link color */
}Parameters and values
- :hover (pseudo-class): Applies while the pointer is over the element
- :focus (pseudo-class): Applies while the element has keyboard/programmatic focus
- :active (pseudo-class): Applies during the moment of being clicked or pressed
- :visited (pseudo-class): Applies to links the user has already navigated to
Best practices
- Never remove focus outlines (outline: none) without providing a clearly visible custom alternative - it is essential for keyboard navigation accessibility
- Style hover states as a nice-to-have enhancement, not a requirement - hover has no equivalent on touchscreens
- Follow the LVHA order (:link, :visited, :hover, :active) when declaring these together, since later rules override earlier ones at equal specificity
- Use :focus-visible instead of :focus alone in modern projects, so focus rings only show for keyboard users, not every mouse click
At a glance
- Purpose
- Presentation and layout
- File extension
- .css
- Runs in
- Web browsers
- Usually used with
- HTML and JavaScript
Specifications & further reading
Related CSS documentation
:focus-visible and :focus-within
:focus-visible applies only when the browser determines focus should be visibly indicated - typically keyboard navigation, not a mouse click - solving the old complaint of unwanted focus rings on click. :focus-within applies to a parent element when any descendant inside it has focus, useful for highlighting an entire form group when one of its fields is active.Form State Pseudo-classes
CSS can style form elements based on their validation and interaction state without any JavaScript. :checked applies to checked checkboxes/radios, :disabled to disabled fields, :required and :optional based on the required attribute, and :valid/:invalid based on constraint validation results.Pseudo-elements
Pseudo-elements let you style a specific part of an element rather than the whole thing, or insert generated content without adding extra HTML. ::before and ::after insert content before/after an element's actual content. ::first-line and ::first-letter target specific text portions. ::placeholder styles input placeholder text, and ::selection styles user-highlighted text.Structural Pseudo-classes: nth-child()
Structural pseudo-classes select elements based on their position among siblings, without needing extra classes. :first-child and :last-child match the first/last element. :nth-child() accepts a formula (like 2n for even, 2n+1 for odd) or a simple number, letting you target patterns like every third item or striped table rows.
:focus-visible applies only when the browser determines focus should be visibly indicated - typically keyboard navigation, not a mouse click - solving the old complaint of unwanted focus rings on click. :focus-within applies to a parent element when any descendant inside it has focus, useful for highlighting an entire form group when one of its fields is active.Form State Pseudo-classes
CSS can style form elements based on their validation and interaction state without any JavaScript. :checked applies to checked checkboxes/radios, :disabled to disabled fields, :required and :optional based on the required attribute, and :valid/:invalid based on constraint validation results.Pseudo-elements
Pseudo-elements let you style a specific part of an element rather than the whole thing, or insert generated content without adding extra HTML. ::before and ::after insert content before/after an element's actual content. ::first-line and ::first-letter target specific text portions. ::placeholder styles input placeholder text, and ::selection styles user-highlighted text.Structural Pseudo-classes: nth-child()
Structural pseudo-classes select elements based on their position among siblings, without needing extra classes. :first-child and :last-child match the first/last element. :nth-child() accepts a formula (like 2n for even, 2n+1 for odd) or a simple number, letting you target patterns like every third item or striped table rows.