Question

Here is my CSS:

#nav-primary ul li:nth-child(1) a:after { }

Works everywhere now (used this on my website) except Internet Explorer 8…

Is there possibly a way to use nth-child in IE8?
This is the worst version of this browser… nothing works as it should and I can’t find a way to fix it.

@edit:
Simplified version of what I want to achieve: http://jsfiddle.net/LvvNL/. Its just a start. CSS will be more complicated so I need to be able to aim every one of this links. Hope adding classes to every link is not the only way

@edit2:
I’ve just noticed that

#nav-primary ul li:nth-child(1) a {
    border-top: 5px solid #144201;
}

IS actually working in IE8! But this:

#nav-primary ul li:nth-child(1) a:after {
    content: "Text";
    display: block;
    font-weight: normal;
    padding-top: 5px;
    font-size: 12px;
    color: #666;
}

is NOT working. So what is going on?

Answer 1

You can (ab)use the adjacent sibling combinator (+) to achieve this with CSS that works in IE7/8.

See: http://jsfiddle.net/thirtydot/LvvNL/64/

/* equivalent to li:nth-child(1) */
#nav-primary ul li:first-child a {
    border-top: 5px solid red;
}
/* equivalent to li:nth-child(2) */
#nav-primary ul li:first-child + li a {
    border-top: 5px solid blue;
}
/* equivalent to li:nth-child(3) */
#nav-primary ul li:first-child + li + li a {
    border-top: 5px solid green;
}​

You cannot emulate more complex variations of :nth-child() such as :nth-child(odd) or :nth-child(4n+3) with this method.