Live preview Checkboxes
Has-Selector Select All
The parent row reads its children through :has() and reports partial or full.
#has-selector CSS effects
17 free, pure-CSS effects match the "has-selector" tag. Each is copy-ready and needs no library or build step.
Live preview Forms
Property Focus Ring
Focusing the field animates a registered angle so the gradient ring circles it once.
Live preview Toggles
Has-Selector Settings Toggle
Switching on expands an extra options panel below it, using :has() and grid rows.
Live preview Badges
Has-Selector Filter Chips
Checked chips restyle themselves and the group header count reacts through :has().
Live preview Buttons
Has-Selector Loading Button
Clicking swaps the label for a spinner, driven purely by the :has() parent selector.
Live preview Checkboxes
Has-Selector Option Row
The :has() selector lets the checked input restyle its entire surrounding card.
Live preview Forms
Has-Selector Validation
The wrapper turns red only after a value is entered and fails, thanks to :has().
Live preview Hover
Has-Selector Sibling Dim
Hovering one row dims every other row, because :has() lifts the state to the list.
Live preview Loaders
Has-Selector Complete Loader
Tick the box and :has() flips the whole spinner into a finished checkmark state.
Live preview Navigation
Has-Selector Active Nav
Selecting a radio marks the item active and shifts the whole bar accent with :has().
Live preview Sliders
Coral Press Slider
Holding the handle squashes it into the rail and the whole card sinks with it.
Live preview Sliders
Savanna Locked State
An enabled rail above a locked twin that drains its colour and dims its own label.
Live preview Tables
Forge Feature Flags
Real checkboxes become sliding switches and every enabled flag tints its own row through has.
Live preview Tables
Lull Size Chart
A hidden checkbox swaps the whole chart between centimetres and inches with no script at all.
Live preview Tables
Savanna Selectable Rows
Real checkboxes drive the row highlight through the has selector with no script at all.
Live preview Tables
Slate Column Scan
Pointing at any cell lights the whole column through a pure CSS has() selector.
Live preview Tooltips
Has-Selector Focus Tooltip
The hint opens on hover and stays open while the field inside it holds focus.