How to select upper level element?

Question

I need to select an upper element from child one by logic below. I understand that pseudo class comparison is on the same level but how to get upper selector with lower level input:checked ~ .input-sibling .parent-of-input-sibling { }

Use [Markdown](https://stackoverflow.com/help/formatting) to increase readability of your question — Ate Somebits, Sep 13 '22 at 17:16
Second example does not work because you are _selecting_ children elements — Ate Somebits, Sep 13 '22 at 17:23

score 1 · Answer 1 · answered Sep 13 '22 at 22:05

Two possible solutions here. First is to use :has pseudo-class. not a complete support yet, it's fairly new, but should work in all of the major browsers but MF.

.parent:has(> input:checked)

Alternatively you could make use of the focus-within pseudo-class. But in this case it's limited to just parents that have focused (not checked) descendants.

How to select upper level element?

1 Answers1