Can't Chage Sibling Property on Input Focus

Question

I want to change property of sibling element when input is focused, but it doesn't work. What am I doing wrong?

.sibling {
  width: 100px;
  height: 100px;
  background-color: blue;
}

input:focus ~ .sibling {
  background-color: red;
}

<div class="sibling"></div>
<input type="text">

Thanks in advance!

I hope this is helpful: https://stackoverflow.com/a/53875661/10698741 — doğukan, Feb 24 '19 at 15:41
I would like to know the reason of the reopen vote .. If I am wrong I would like to know how — Temani Afif, Feb 24 '19 at 15:58

score 2 · Accepted Answer · answered Feb 24 '19 at 15:41

2

Just change your html order

<input type="text">
<div class="sibling"></div>

answered Feb 24 '19 at 15:41

Ignacio Martínez

1 Answers1