CSS pseudo classes in Internet Explorer 8

This might apply to IE7 too, I'm not sure though. I have the following CSS:

div#sidebar-right a.menu-item img:nth-child(1),
div#sidebar-right a.menu-item > *:first-child {
    position: relative;
    left: 11px;
    top: 37px;
    z-index: 10;
    opacity: 0;

    -webkit-transform: rotate(6deg);
    -moz-transform: rotate(6deg);

    -webkit-transition-property: top, opacity, -webkit-transform;
    -webkit-transition-duration: 0.2s, 0.3s, 0.5s;
    -webkit-transition-timing-function: linear, linear, ease-in;

    -moz-transition-property: top, opacity, -moz-transform;
    -moz-transition-duration: 0.2s, 0.3s, 0.5s;
    -moz-transition-timing-function: linear, linear, ease-in;
}

div#sidebar-right a.menu-item:hover img:nth-child(1),
div#sidebar-right a.menu-item:hover > *:first-child {
    top: -6px;
    opacity: 1;

    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
}

div开发者_StackOverflow中文版#sidebar-right a.menu-item img:nth-child(2),
div#sidebar-right a.menu-item > *:first-child + * {
    position: relative;
    z-index: 11;
    top: -63px;
}

div#sidebar-right a.menu-item.home-menu:hover img:nth-child(2),
div#sidebar-right a.menu-item.home-menu:hover > *:first-child + * {
    top: -100px;
}

div#sidebar-right a.menu-item.code-menu:hover img:nth-child(2),
div#sidebar-right a.menu-item.code-menu:hover > *:first-child + * {
    top: -97px;
}

div#sidebar-right a.menu-item.game-menu:hover img:nth-child(2),
div#sidebar-right a.menu-item.game-menu:hover > *:first-child + * {
    top: -101px;
}

div#sidebar-right a.menu-item.sports-menu:hover img:nth-child(2),
div#sidebar-right a.menu-item.sports-menu:hover > *:first-child + * {
    top: -98px;
}

div#sidebar-right a.menu-item.the-nation-menu:hover img:nth-child(2),
div#sidebar-right a.menu-item.the-nation-menu:hover > *:first-child + * {
    top: -98px;
}

For some reason this CSS is not being picked up in IE8 at all. I understand that nth-child is not supported in IE8, but first-child is and that's also listed as a rule here. Any thoughts? What's really puzzling is that the rule isn't just not being applied, it's just not showing up. If you look at the Developer Tools view under the CSS tab, you can literally scroll through the entire thing and not see any of these rules in there. Very confusing.

It seems you misunderstood how selector parsing works. IE8 sees selector of the form something_invalid, something_valid which means it should ignore the entire selector and not apply the properties. I'll give you another example - imagine you specify selector like div, p:foo-bar { /* properties */ }. Even if the div selector is completely valid, the declaration is dropped because of the unrecognized pseudoclass foo-bar. Browsers always check if the entire selector is valid; there's nothing special when using comma in the selector.

The solution is simple - just remove the nth-child part of selectors; your notation with first-child will match the desired elements in all browsers.

try a.menu-item.home-menu:hover * instead of a.menu-item.home-menu:hover > *:first-child + *