How to workaround: IE6 does not support CSS "attribute" selectors

Question

One of the projects which I am working uses CSS "attribute" selector [att]

which is not supported by ie6: Support for CSS selectors in IE6 (look for text "Attribute Selectors")

Is there any workaround/hack which is of course valid html/css to overcome this problem?

score 26 · Answer 1 · answered Mar 16 '09 at 06:00

26

This isn't possible without peppering your HTML with a stack of extraneous class selectors, sadly.

I'd recommend designing your site so that your entirely valid CSS works for people using modern browsers, and that it's still usable in the IE6, albeit visually not quite right. You just have to find the right balance between getting your site up to standard and bending over backwards for users who won't upgrade. It's a broken browser, treat it as such.

answered Mar 16 '09 at 06:00

nickf

537,072
198
649
721

1

Yeah this is the way forward. Developers have got to stop trying to make things pixel-perfect in IE6. For example I've set up some columns using the :first-child pseudo-selector to remove the left margin on the first column. For IE6 I just made the margins smaller so it doesn't mess up. – DisgruntledGoat Mar 24 '09 at 01:31
1

It is possible with CSS expressions. See http://stackoverflow.com/q/8231617/143739 – kzh Nov 22 '11 at 18:13

score 20 · Accepted Answer · answered Mar 16 '09 at 05:18

20

Since IE6 is essentially limited to:

class selectors
ID selectors
(space) descendant selectors
a:-only pseudo-selectors

your only options are:

Use more classes to identify your elements
Use JavaScript (strongly not recommended except in highly specialized cases)

I find it very helpful to take advantage of the ability to assign multiple classes to an element by separating them with a space: class="foo bar"

answered Mar 16 '09 at 05:18

Rex M

142,167
33
283
313

is valid html? – coder_bro Mar 16 '09 at 05:30
1

@ngm no, duplicate attribute specifications are not allowed – Rex M Mar 16 '09 at 05:34
2

@ngm you can however use class="foo bar" – Dels Mar 16 '09 at 06:18
2

@Rex M and @Ngm, Multiple classname styles are ignored by IE6 e.g. .foo.bar {} – ndorfin Mar 16 '09 at 11:20
@ndorfin that's true but beside the point in this case. just because multiple classes on the same level can't be targeted in IE6 doesn't mean we cant use multiple classes to apply different styles to overlapping sets of elements. – Rex M Mar 16 '09 at 13:00
@ndorfin: it's not that they are ignored, it's that IE6 transfers the rules to all classes in the rule, regardless of if all classes are applied to the element. – Crescent Fresh Mar 16 '09 at 16:19
@crescentfresh i am not sure if that is true. targeting a.foo.bar in IE6 does not seem to work. – Rex M Mar 16 '09 at 16:21
@Rex: ` – Crescent Fresh Mar 16 '09 at 17:24

score 8 · Answer 3 · answered Mar 16 '09 at 06:21

If you want attribute selector in IE6, you can use Dean Edward IE.js. http://dean.edwards.name/IE7/

That will make IE 5+ behave much more like IE7

supports the following CSS selectors: 
parent > child
adjacent + sibling
adjacent ~ sibling
[attr], [attr="value"], [attr~="value"] etc
.multiple.classes (fixes bug)
:hover, :active, :focus (for all elements)
:first-child, :last-child, only-child, nth-child, nth-last-child
:checked, :disabled, :enabled
:empty, :contains(), :not()
:before/:after/content:
:lang()

I didn't have IE6 (use IE7) so i can't said it worked, but give it a try

This is a good option but be aware, (and this isn't from experience but from looking at the code and how it implements support) that your CSS rules will not automatically "apply" to dynamic changes to elements that happen through JS - adding classes, elements, etc. will not get the original CSS rules. — Nicole, Mar 24 '10 at 17:59

kzh · Answer 4 · 2012-08-03T15:36:33.223

6

You can use Internet Explorer CSS expressions combined with the safe underscore ("_", IE6 and earlier) CSS hack:

/* Adds dotted bottom border to `<ABBR>` with a `title` attribute. */
abbr {
        _border-bottom: expression(this.title ? '1px dotted' : 'none');
}

abbr[title] {
        border-bottom: 1px dotted;
}

I do understand, that you did ask for "valid" CSS, but if the CSS hack above freaks you out, please read about Safe CSS Hacks.

The above could be changed to:

.ie6 abbr {
        _border-bottom: expression(this.title ? '1px dotted' : 'none');
}

abbr[title] {
        border-bottom: 1px dotted;
}

That is if your HTML began as:

<!--[if lt IE 7]><html class="ie6"><![endif]-->
<!--[if IE 7]>   <html class="ie7"><![endif]-->
<!--[if IE 8]>   <html class="ie8"><![endif]-->
<!--[if gt IE 8]><!--><html><!--<![endif]-->

edited Aug 03 '12 at 15:36

answered Nov 22 '11 at 18:12

kzh

19,810
13
73
97

+1 for the expression() statement. I've been building websites and crafting CSS for 12 years and it's the first time in my life to see this wizzardy cool shit! – Ahmad Alfy Apr 11 '13 at 12:02
1

It doesn't work in IE8. They finally took it out due to security issues, but it does work in IE7. IE also has a thing called "behaviors" in CSS. – kzh Apr 11 '13 at 12:26

score 5 · Answer 5 · answered Mar 16 '09 at 06:17

5

Dean Edwards' IE7 JavaScript library provides attribute selector support for IE 5 and 6.

answered Mar 16 '09 at 06:17

Simon Lieschke

13,058
6
46
60

score 2 · Answer 6 · answered Mar 16 '09 at 05:19

2

Use classes, that's the only workaround, sadly.

answered Mar 16 '09 at 05:19

Julian Aubourg

11,346
1
29
29

is valid html? – coder_bro Mar 16 '09 at 05:30
use class="button bar" instead – Julian Aubourg Mar 16 '09 at 05:54
@ngm you can use class="foo bar" – Dels Mar 16 '09 at 06:19

score 0 · Answer 7 · answered Apr 21 '09 at 19:53

If you're using jQuery on your site, another option is SuperSelectors - it goes through your site’s stylesheets, dynamically adding classes to elements so that even IE6 can bask in the glow of properly supporting CSS selectors like ul li:first-child li:nth-child(odd) a:hover.

How to workaround: IE6 does not support CSS "attribute" selectors

7 Answers7

Linked