css: matching element that follows input-button's label

Question

I am trying to make a selector that matches the element zzz if the input button is pressed.

<label>
 <input type="radio" name="hideshow">
 <h1>{{heading}}</h1>
</label>
<zzz class="hideable">
   Some content to show if button pressed.   
</zzz>

So far after much struggle I have stumbled on a new selector :has. However it is not working. More research shows that it is disabled for css (can be used from javascript), because of its poor performance.

How can I get this to work? I am sure there must be a simple solution, but I am not seeing it.

from the duplicate: https://stackoverflow.com/a/56504080/8620333 — Temani Afif, Jul 03 '19 at 08:55
That question is not a duplicate, it just happens to have an answer that is a duplicate of the one below. If I were to delete this answer, then they would have nothing in common, except they are both about css. — ctrl-alt-delor, Jul 03 '19 at 09:11
it's a duplicate because you are not able to achieve what you want due to the missing parent selector. So either it's impossible and you consider JS to do it (desribed in the duplicate) or you change your HTML structure (described also in the duplicate). There is more duplicates by the way, I simply considered the canonical one. — Temani Afif, Jul 03 '19 at 09:13
This one is almost the opposite. If we consider it for my example then it would be trying to match the `input` element. I am trying to match the `zzz` element. Sort of, but event then nether is a parent of the other. — ctrl-alt-delor, Jul 03 '19 at 09:52
I said you are *missing a parent selector*, I never said *one is the parent of the other*. To achieve your result you need to first select the **parent** element of the input (the `label`) then select `zzz` so you will use two selector: a parent select (the missing one) and a sibling selector (this on is available and trivial) --> `label:has( > input:checked) + zzz` — Temani Afif, Jul 03 '19 at 10:10

score 0 · Answer 1 · answered Jul 03 '19 at 08:49

By not nesting the input element in the label, but instead using an id and for attribute. There becomes no need for the complex selector.

<input type="radio" name="hideshow" id="{{headingId}}"\>
<label for="{{headingId}}">
   <h1>{{heading}}</h1>
</label>
<zzz class="hideable">
   Some content to show if button pressed.   
</zzz>

css: matching element that follows input-button's label

1 Answers1