View Full Version : CSS Attribute Selector + IE9

11-20-2011, 03:05 PM
Hey everyone!

I experienced some weird behaviour with CSS and IE9. I'm programming a tree for navigation that looks like this in HTML:

<div class="treeEl" name="p1_1" type="1" selector="1" over="0">
<div class="elDesc">
<img class="elIcon" src="img/icon.png"></img>
<div class="elText">p1_1</div>
<div class="elOver"></div>
<div class="treeChildren">
<!-- here more "treeEl" Elements with oher "treeChildren" Elements, and so on -->

Now i'm using attribute selectors in CSS to distinguish e.g. between selected and non selected elements. When i click on an elements, the attribute "selector" is set to 1 or 2 or 3 (and so on) and then CSS should change the background and the border style.

.treeEl:not([selector = "0"]) > .elDesc {border: 1px solid rgb(220,220,240);background-color:rgb(240,240,250)}

The weird thing is, that it only works sometimes. When i refresh the browser window, it normally doesn't work after that. I then have to start and end the debug mode of IE9 and refresh again....and it works! When i keep the debug mode activated, it always works.

I already checked that the attribute is really set correctly with Javascript, so this is not the problem. It also seems to work correctly with Firefox, so i guess it's an IE related problem?? Did anyone make similar experiences or has an idea what the problem could be?

11-20-2011, 07:35 PM
I have never seen css mark up like that before.

I think the
not([selector = "0"]) >
is Jquery and I don't know if it works in the css file.

And when your styling two elements you should separate them with a comma.

11-20-2011, 07:47 PM
no need to get fancy with selectors


IE6: NO, IE7: NO, IE8: NO


put them together, and you got something that isn't stable

use classes

11-20-2011, 10:05 PM
Thanks for the advise Sammy. You're probably right. But i also have quite simple attribute selectors like .treeEl[open = "1"] {...}. And those are also not always working. And i only use IE9 which is afaik supposed to support all of the selectors i use. And why does it work when i'm in debug mode. It doesn't really make much sense to me.

11-20-2011, 10:14 PM
maybe this might help


you also need to use the html5 doctype, since creating attributes is html5
maybe ie9 doesn't support that yet or more likely, buggy

I'm not sure, but a live view of the problem would be helpful

11-21-2011, 09:16 AM
I just saw that other persons had the same problem with IE. CSS doesn't get refreshed when you change an attribute that is used as a selector. A solution would be to add en "el.className = el.className" after every change of an attribute. Maybe not the cleanest solution. So i probably will go back to use classes after all.