CODEWITHSUNDEEP
htmlcss
gstackoverflow
gstackoverflow

Reputation: 37034

Add style If element has specific sibling

I have the following html structure:

<div class="unit">
   <span class="error"></span>
   <input type="text" class="textInput"/>
</div>

I add span only if validation restriction is broken.

thus if validation passed I render following html:

<div class="unit">       
   <input type="text" class="textInput"/>
</div>

Is there way in css to draw red border for input if it has sibling span with class error.

Upvotes: 0

Views: 157

Answers (3)

Valentin Mladenov
Valentin Mladenov

Reputation: 31

Consider the following code: 

.error + input.textInput {
    border: 1px solid red;
}

This will select all .textInput nodes which are immediately preceded by a .error node.

Upvotes: 2

Dhaval Marthak
Dhaval Marthak

Reputation: 17366

You can try adjacent sibling selector

.error + input.textInput 
{
   border:1px solid red;
}

Upvotes: 5

K K
K K

Reputation: 18099

Try this:

.unit span.error + input.textInput{border:1px solid red;}

or

.unit span.error + input.textInput{outline:1px solid red;}

Upvotes: 1

Related Questions