Измените фон делителя, как только вход был выбран

Question

имея здесь момент блондинки, пытаясь использовать CSS, чтобы сказать разделителю сменить фон, как только у ввода есть фокус.

<p>
    <label>Your Name</label>
    <input type="text" name="your_name" id="your_name" value="" />
    <div class="formhelper">Please enter your full name,<br />Character limit of 255</div>
</p>

Это код HTML, теперь я попробовал следующее, но могуне заставить его работать

.appformwrapper input:focus + div {
    background-color: #CCC !important;
    display: block;
} 
.appformwrapper div ~ input:focus {
    background-color: #CCC !important;
}
.appformwrapper input:focus {
    background-color: #EEF;
} 

Есть идеи?Я делал это однажды в CSS, но не могу найти мне взломанный код: (

Answer 1

Недопустимо HTML иметь div в p. Браузеры возьмут вашу разметку и будут обрабатывать ее так:

p
  label
  input
div

Это означает, что ваш div на самом деле идет после p, а не находится внутри него. Поэтому, когда вы пытаетесь выбрать div, который идет после input, он не будет работать, потому что div не существует в этой позиции.

Если вы можете изменить p на div или свой div на span, ваш CSS должен работать. Я не уверен, что именно ваше второе правило должно делать, но оно все равно не будет работать, так как общий селектор брата ~ не смотрит на предыдущих братьев и сестер.