Question

I have some classes that are grouped. However in IE7 and lower it doesn’t implement any of the classes in the group. It just seems to ignore them:

#subnav a,
#subnav span {
    /* css here */
}

And the html:

<div id="subnav">
    <ul class="depth-1">
        <li class="selected">
            <a href="someLink.html">Some Link</a>
        </li>
        <li>
            <a href="anotherLink.html">Another Link</a>
        </li>
        <li>
            <span>Header</span>
            <ul class="depth-2">
                <li>
                    <a href="google.com.au">Google</a>
                </li>
            </ul>
        </li>
    </ul>
</div>

Is CSS grouping not supported in IE7 and below or is something else causing this to happen?

Thanks

Answer 1

You could try a few things here:

1. make sure this rule group is last in the css stylesheet to ensure that no other styles are overwriting these ones

2. make the selectors as specific as possible, to ensure the elements are targeted. So, instead of #subnav a, try div#subnav ul.depth-1 li.selected a

3. make sure the styles can be applied to those particular elements. a and span are inline elements and do not accept all styles.