开发者

Find if class has border in css

开发者 https://www.devze.com 2023-03-01 19:21 出处:网络
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 isNot to fall back on to either jquery. Is this possible to

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 ids, 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:

  1. 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.
  2. Make this selector more specific, so that it only applies to elements that you want it to.
  3. Make your other selectors more specific with classes, IDs, or nested selectors (like form textarea).
0

精彩评论

暂无评论...
验证码 换一张
取 消