Syntax
:checked, :disabled, :required, :valid, :invalidExamples
Styling Checked and Disabled States
Visual feedback for checkbox state and disabled fields.
input[type="checkbox"]:checked {
accent-color: #3b82f6; /* tints the native checkbox */
}
input:disabled {
opacity: 0.5;
cursor: not-allowed;
}Live Validation Styling
Giving instant visual feedback based on native HTML validation.
input:required {
border-left: 3px solid #f59e0b; /* marks required fields */
}
input:invalid:not(:placeholder-shown) {
border-color: red; /* only show invalid state once the user has typed something */
}
input:valid:not(:placeholder-shown) {
border-color: green;
}Parameters and values
- :checked (pseudo-class): Matches checked checkboxes, radios, or selected options
- :disabled / :enabled (pseudo-class): Matches based on the disabled attribute
- :required / :optional (pseudo-class): Matches based on the required attribute
- :valid / :invalid (pseudo-class): Matches based on constraint validation results
Best practices
- Combine :invalid with :not(:placeholder-shown) to avoid showing an error state before the user has even had a chance to type
- Use :checked alongside the sibling combinator (~) as a classic CSS-only technique for building toggles and accordions without JavaScript
- Style :disabled fields clearly (reduced opacity, not-allowed cursor) so users understand why they cannot interact with them
- Remember :valid/:invalid reflect the browser's native HTML validation - custom JavaScript validation needs its own styling approach, like conditional classes
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
Interactive Pseudo-classes
These pseudo-classes style elements based on user interaction state. :hover applies while the pointer is over an element, :focus while it has keyboard focus, :active during the moment of being clicked/pressed, and :visited for links the user has already navigated to.: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.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.
These pseudo-classes style elements based on user interaction state. :hover applies while the pointer is over an element, :focus while it has keyboard focus, :active during the moment of being clicked/pressed, and :visited for links the user has already navigated to.: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.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.