Question

having a blonde moment here, trying to use CSS to tell a divider to change its background once an input has focus.

<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>

Thats the HTML code, now I’ve tried the following but can’t get it to work

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

Any ideas? I’ve done this once before in CSS but can’t find me blasted code 🙁

Answer 1

It’s not valid HTML to have a div in a p. Browsers will take your markup and treat it as this:

p
  label
  input
div

Which means your div actually comes after the p, rather than being inside it. So while you’re trying to select a div that comes after an input, it won’t work because the div doesn’t exist in that position.

If you can change your p to another div, or your existing div to a span, your CSS should work. I’m not sure what exactly your second rule is supposed to do either, but it still won’t work, as the general sibling selector ~ doesn’t look at previous siblings.