:checked

How to target an element when checkbox is checked ? are there any limits we can target
4 Replies
croganm
croganm16mo ago
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
croganm
croganm16mo ago
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!
dys 🐙
dys 🐙16mo ago
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…)
croganm
croganm16mo ago
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
Want results from more Discord servers?
Add your server