I am looking to add borders to specific elements based on certain criteria, such as:
- Elements with the
.xforms-requiredclass that are notspanelements OR inputelements that are descendants of elements with the.xforms-requiredclass
To achieve this, I have created the following CSS code:
.xforms-required:not(span), .xforms-required input {
border: 1px solid gold !important;
}
You can view the result on this Fiddle.
The code works correctly in Firefox 18.0.1 but does not work in IE (tested in IE 8). I am unsure if there is an issue with the CSS selector or the border attribute.
Due to some issues with jsFiddle in IE, I have provided a simple HTML snippet below:
<html>
<body>
<style>
.xforms-required:not(span), .xforms-required input {
border: 1px solid gold !important;
}
</style>
<span class="xforms-required">
<input> // This should have a border
</span>
<input class="xforms-required"> // This should have a border
</body>
</html>
I apologize if this seems like a basic question, as I am not very experienced with CSS.
In response to feedback from Adrift regarding browser compatibility, since :not() is only supported in IE9+, I am seeking alternative methods to achieve the same effect in earlier versions like IE7+.