Apply CSS outside the selector - css

Question

I want to make the border of my error select box outside div.wwctrl color red. The problem is it doesn't changed it color using advance css selector. I want to use css and not javascript to implement this. Is this possible? Thank you.
<div class="wwctrl">
<select id="error" name="summaryData.type"></select>
</div>
.wwctrl {
position: relative;
border: 1px solid blue;
}
select {
border: 1px solid pink;
}
select#error + div {
position: absolute;
z-index: -1;
top: 0; left: 0;
width: 100%; height: 100%;
background: yellow;
}
​
SAMPE CODE - JFIDDLE

Answer 1

Sure you can do so with CSS.
Most important: IDs (#) are only allowed to be used on one element in the whole document, so if you want to apply an identifier to several elements, you have to use a class (.)!
You just declare the border for the selectbox outside wwctrl.
select.error{
border:1px solid red;
}
Now you override this selector with a more specific selector for the error boxes inside wwctrl:
.wwctrl select.error{
border-color:pink;
}
Because the rule is more specific, it overrides the previous rule.
<div class="wwctrl">
<!-- has a pink border -->
<select class="error" disabled="disabled"><!--...options...--></select>
<select><!--...options...--></select>
</div>
<!-- outside wwctrl - has a red border -->
<select class="error" disabled="disabled"><!--...options...--></select>
Your modified example