Find if class has border in css only, by using attribute selector or by any other means.If it is not having then apply the border.Intention is Not to fall back on to either jquery. Is this possible to acheive?
Edited to include response from @nag (OP):
In IE8 there is no border
for select
. So I'm trying to do a css reset like this:
select, input[type="file"], t开发者_如何学编程extarea {
border: solid 1px #7F9DB9;
}
The problem is it is overriding any preexisiting style because of specificity. I tried to use expression filter but with DocType in IE8 it does not seem to work.
CSS has no concept, or implementation, of if/else
statements, so this is not possible in CSS only.
However, if you define the border
for an element, and then later redefine that border
the second statement will override the first (assuming an equally specific selector), so I'm unsure as to why you need to apply a border
only if the element doesn't already have a border
defined:
div {
border: none; /* removes the border */
}
/* other stuff */
div {
border: 1px solid #f90; /* defines the border */
}
Similarly:
div {
border: 5px solid #0f0; /* defines the border */
}
/* other stuff */
div {
border: 1px solid #f90; /* re-defines the border */
}
If you can define your use-case it might be possible to help you further.
Edited to address the further information in the question:
In IE8 there is no border for select. So I'm trying to do a css reset like this:
select, input[type="file"], textarea {
border: solid 1px #7F9DB9;
}
The problem is it is overriding any preexisiting style because of specificity. I tried to use expression filter but with DocType in IE8 it does not seem to work.
If the problem is specificity, then the only options you have are to either increase the specificity of the selector you want to apply, ideally use an id
, or multiple id
s, in your selector (the id
of an ancestor element is fine) since that's the most specific selector available.
Or, you can decrease the specificity of the selector you want to override.
It's worth noting that the select
element is difficult to style reliably since it's often rendered by the underlying OS, rather than the browser itself, for a consistent look within that operating system.
You have three alternatives:
- Use JavaScript - that has logic, so you can check whether it has a border or not and then do something with the result. You can use a library like jQuery or MooTools to make it easier.
- Make this selector more specific, so that it only applies to elements that you want it to.
- Make your other selectors more specific with classes, IDs, or nested selectors (like
form textarea
).
精彩评论