Question

Basically is what is says in the tin.

I have an input tag and independent javascript to control it. When they user is inserting data it changes one of its’ classes automatically so that its color is changed by CSS which is defined elsewhere Until then everything is ok. Next: I want the whole div that contains that input to change color so that the user can be warned when something is wrong. There’s a problem here: How can I select that div I want to select only using CSS?
Here’s some code that works for the input:

input.wrongVal {
    border-color: red;
    background-color: red;
}
input.wrongVal:active{
    background-color: white;
}

Here’s the relevant code from the page:

<div class="infoinputContainer">
    <p class="inputLine">
        <span>
            <input type="text" id="data">
            <label for="data">Data info</label>
        </span>

    </p>

</div>

How can I, with only CSS, select for styling the div shown here (and no other div) with, for instance, another background?

Answer 1

You can’t do that with CSS. What you can do however is use Javascript to either change the class of the div container or wrap the div container into another div.

<div class="infoinputContainer invalid">
    <p class="inputLine">
        <span>
            <input type="text" id="data">
            <label for="data">Data info</label>
        </span>

    </p>
</div>

or:

<div class="invalidInput">
  <div class="infoinputContainer">
    <p class="inputLine">
        <span>
            <input type="text" id="data">
            <label for="data">Data info</label>
        </span>

    </p>
  </div>
</div>