:checked
How to target an element when checkbox is checked ?
are there any limits we can target
4 Replies
Sara Cope
CSS-Tricks
:checked | CSS-Tricks
The :checked pseudo-class in CSS selects elements when they are in the selected state. It is only associated with input () elements of type radio and checkbox
Now you can use parent selectors too
That really elevates it
body:has(.checked:checked) .target-other-element
Not sure if it will work but I think it should!I actually just used that pattern to optionally turn on some grid styling: https://codepen.io/u3b4/pen/BaGExjx (Firefox doesn't have
has yet though…)Very cool! And yes, support is very limited right now
May be better off using Javascript and CSS. You can create it in css, then perform an optional check in js. If it supports :has, do nothing so your css rule takes over. If it doesn't, use JS