-
-
Notifications
You must be signed in to change notification settings - Fork 4.8k
group-has-[input:checked]
as group-checked
(based on the pattern of peer-checked
, but for nested elements)
#18044
rozsazoltan
started this conversation in
Show and tell
-
In relation to a question (How can the peer class be used not only on sibling elements but also within nested child elements?), I wrote a custom variant that applies specific classes if there is an input:checked
within a given .group
- I'm sharing it here as well.
@custom-variant group-checked { &:is(:where(.group):has(input:checked) *) { @slot; } }
<div class="group"> <input type="checkbox" /> <label>Example</label> <div> <p class="hidden group-checked:block">Checked</p> </div> </div>
Unfortunately, custom variants written for the group variant do not support named groups, so they have to be re-declared manually for each named group. I believe a nameless example is sufficient for demonstration purposes.
Beta Was this translation helpful? Give feedback.
All reactions
Replies: 0 comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment