I have the following DOM structure:
<div>
<input type="checkbox" class="has-keyboard-focus" />
</div>
<div>
<div class="fake-checkbox" />
</div>
How do I target, with pure CSS, the fake checkbox, only when the real checkbox has the has-keyboard-focus
class? I tried:
div input.has-keyboard-focus ~ div .fake-checkbox {
border: 2px solid red
}
... however the part to the left of the sibling operator, does not seem to be read as group. Instead, it expects the div .fake-checkbox
to be on the level of the input field.
I would change the DOM structure if I could.