Apply CSS outside the selector

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

see http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector — gherkins, Jul 24 '12 at 07:16

Christoph · Accepted Answer · 2012-07-24T07:46:53.643

2

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

edited Jul 24 '12 at 07:46

answered Jul 24 '12 at 07:36

Christoph

50,121
21
99
128

i want the border to be in the div.wwctrl not in the select box itself – newbie Jul 24 '12 at 08:11
doesn't matter, it's the same procedure. Just add an extra `+div` to my selectors. – Christoph Jul 24 '12 at 08:12
Sure it is: http://jsfiddle.net/poikl/s6LbB/4/ Or did i misunderstand your question? What exactly do you want? – Christoph Jul 24 '12 at 08:25

Apply CSS outside the selector

1 Answers1