0

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.

jorisw
  • 647
  • 1
  • 9
  • 14

0 Answers0