IE8 :nth-child and :before

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.

Answer 2

IE9.js solves this and other related problems!

:nth-child(odd) and :nth-child(even) work with this.

Usage:

<!--[if lt IE 9]> <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script> <![endif]-->