Question

i have this css rule in my stylesheet for a link list. the first is a general rule for the <a> tags and the last two are specific rules for the first and last child with fail-overs for the first-child and last-child pseudo-classes

/* weight: (1 class) + (3 elements) = 13 */
.topNavigation ul li a { 
color: #666;
text-decoration: none;
display: block;
font-size: 28px;
margin: 5px 20px;
}

/*for both rules: (1 class + [1 pseudo class or 1 class]) + (3 elements) = 23 */
.topNavigation ul li:first-child a, .topNavigation ul li.first-child a {
margin-left: 0;
}
.topNavigation ul li:last-child a, .topNavigation ul li.last-child a {
margin-right: 0;
}

the html is this:

<div class="topNavigation">
<ul>
    <li class="first-child current">
        <a href="#">home</a>
    </li>
    <li>
        <a href="#">services</a>
    </li>
    <li class="last-child">
        <a href="#">blog</a>
    </li>
</ul>
</div>

the general idea is that the links are contained in <li> and are “margined” away from the edges of the <li>. the problem is that IE8 is NOT honoring the specificity and is still using the margins stated in the first rule (the margin: 5px 20px;). I have tested it in IE7, IE9, chrome and other browsers and only IE8 is not following.

anything wrong with this rule? or am i overseeing an IE8 bug?

Answer 1

You combined the pseudo-class and class selectors in this rule:

.topNavigation ul li:last-child a, .topNavigation ul li.last-child a {
margin-right: 0;
}

Since IE < 9 doesn’t understand :last-child, it should disregard the entire rule (I’m not sure why it works for you in IE7; it should break in the same way in both IE7 and IE8), even though it can understand and apply the rule for .last-child. Therefore the only margin it can fall back to is your first one.

Technically the only solution to this is to break it into two rules, one for each selector.

But I suggest that you just go with adding the HTML classes. Since you’re already doing that to support older browsers, might as well keep it since all browsers support that:

.topNavigation ul li.first-child a {
margin-left: 0;
}
.topNavigation ul li.last-child a {
margin-right: 0;
}