'not' css selector in ie9

Question

According to http://www.w3schools.com/cssref/sel_not.asp the "not" selector is supported in IE9 However the following doesn't work in ie9:

HTML:

<input type="checkbox"><span>I agree to the terms and conditions</span>

CSS:

input:not(:checked) + span
{
    font-weight:bold;
    text-decoration:underline;
    color:red;
}

When you check the checkbox, the style is still applied. In other browsers (FF, Chrome) it works as expected.

Is it some sort of bug with IE9?

Thanks.

Answer 1

I don't know what the bug is exactly, but I have got a workaround for you.

With some experimenting I discovered that if you put this line

input:checked + p {}

above your CSS, your CSS works fine in IE. So I propose you just put that in and forget about it, unless you want to invest a lot of time in finding out what the extent of the bug is exactly.

input:checked + p {}

input:not(:checked) + span {
  font-weight: bold;
  text-decoration: underline;
  color: red;
}

<input type="checkbox"><span>I agree to the terms and conditions</span>

To test, you can comment out the first line, and then it stops working in IE.