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