CODEWITHSUNDEEP
csscss-selectors
brunoais
brunoais

Reputation: 6866

CSS: Select a tag that is a parent of a parent of a tag with the class I want

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?

Upvotes: 0

Views: 414

Answers (3)

mbreining
mbreining

Reputation: 7809

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>

Upvotes: 2

Richard JP Le Guen
Richard JP Le Guen

Reputation: 28753

You can't. Not with pure CSS.

CSS selectors only select/target children or descendants for performance purposes: if you could target :parent (like in jQuery) the browser would have to wait to render any of the page until it had processed all child nodes.

You'll have to use JavaScript instead.

Upvotes: 2

jeroen
jeroen

Reputation: 91792

You can't with just css.

What are you using to change the class when a user enters information? If it's javascript, you can use that to change the class of the parent (or grandparent) as well.

Upvotes: 0

Related Questions