Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

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
Discussion options

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.

You must be logged in to vote

Replies: 0 comments

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
1 participant

AltStyle によって変換されたページ (->オリジナル) /