I want help to choose the right selector so that this code will work

Question

in html

<input type="checkbox" class="num4">`
<input type="checkbox" class="num1">
<input type="checkbox" class="num2">
<input type="checkbox" class="num3">

in css

.num3:checked +.num4{
transform: scale(0);

}

Please clarify your specific problem or provide additional details to highlight exactly what you need. As it's currently written, it's hard to tell exactly what you're asking. — Community, Aug 26 '22 at 13:51

score -1 · Answer 1 · answered Aug 26 '22 at 13:54

There is no "preceding sibling" selector in CSS, so the checkboxes do need to be in the "correct" order (i.e. you can use preceding elements to hide following ones, but not the other way around).

I switched your + (adjacent sibling) selector for ~ (general sibling); you can see that in action with the num1/num3 selection.

.num3:checked ~ .num4, .num1:checked ~ .num3 {
  transform: scale(0);
}

<input type="checkbox" class="num1">
<input type="checkbox" class="num2">
<input type="checkbox" class="num3">
<input type="checkbox" class="num4">

I want help to choose the right selector so that this code will work

1 Answers1