65

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?

smogg
  • 1,494
  • 3
  • 19
  • 27
  • 57
    _No. IE **6** is the worst version_ `` – SLaks Dec 13 '11 at 15:55
  • 44
    @SLaks: IE6 is not a browser. – smogg Dec 13 '11 at 15:56
  • 14
    I didn't say it's a browser; I said it's a version. :-) – SLaks Dec 13 '11 at 15:58
  • 2
    @SLaks: Good point. You're right then :) – smogg Dec 13 '11 at 15:59
  • http://stackoverflow.com/a/8376624/34397 – SLaks Dec 13 '11 at 16:05
  • 4
    Why don't you simply use `:first-child` instead of `:nth-child(1)`? It is supported in IE8. – kapa Dec 13 '11 at 16:07
  • Can you [show your current HTML/CSS](http://jsfiddle.net/)? It might be possible achieve the same thing in a way supported by IE8. – thirtydot Dec 13 '11 at 16:08
  • @thirtydot: Added to "edit" in question. – smogg Dec 13 '11 at 16:21
  • @SLaks: If I understand correctly, you want me to add classes for IE versions. I don't see how it can help me. I'm still not able to aim just first, second or third link in my menu. – smogg Dec 13 '11 at 16:21
  • I wasn't giving that as an answer; I was linking that for its first line. – SLaks Dec 13 '11 at 16:23
  • @smogg. I know you are trying to sound smart, but a decade earlier, IE6 was the bee's knees for business compared to Netscape. In 2011, after some useful standards had come into being, and later browsers began supporting them more fully, IE6 became rather archaic. The problem then was that MS was not allowing later IEs on XP, so a whole lot of enterprises that had relied upon IE6 for LoB and B2B processes did not want to spend the money remediating all their apps to work on later versions of IE, so they just stayed on XP, until forced to bite the bullet. – Patanjali Jul 28 '16 at 06:32

6 Answers6

256

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.

thirtydot
  • 224,678
  • 48
  • 389
  • 349
  • What happens if I have `nth-child(5n+2)` or `nth-child(-n+6)` ? – Snake Eyes Sep 09 '13 at 14:07
  • @SnakeEyes: Then you can't do it with pure CSS in IE7/8. If you have a known upper bound on the number of elements you can manually select for example the elements with index `7, 9, 11, 13, 15, ..` as high as you need. Or, use JavaScript to fix it such as IE9.js in the answer below. Otherwise, accept that IE7/8 suck and don't try to fix it. – thirtydot Sep 09 '13 at 17:12
  • You can emulate odd like so: `.container .row:first-child, .container .row:first-child + .row + .row, .container .row:first-child + .row + .row + .row + .row, .container .row:first-child + .row + .row + .row + .row + .row + .row {}` – aholmes Aug 25 '14 at 20:36
  • @aholmes: That's a solution if you know the maximum possible number of elements. – thirtydot Aug 26 '14 at 10:33
  • 1
    @thirtydot : Oh my ! Did you seriously wished that JSFiddle itself would work in IE 8 ? ;-) Thanks BTW :-) – ablaze Jul 10 '15 at 15:12
29

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]-->
jackJoe
  • 11,078
  • 8
  • 49
  • 64
Niko
  • 574
  • 5
  • 13
  • Goldfind! Maybe not optimal for IE8 users because the script's a bit heavy, but it definitely makes my job easier and keeps my boss happy! – Chris Apr 20 '15 at 13:57
6

Try pairing Selectivizr with NMWatcher. That's what I do on all my sites to get good pseudo selector support across all browsers. FWIW if you're using a lot of HTML5 elements then it might be worth using v 1.2.3 of NMWatcher rather than 1.2.4, I had a selectivizr issue with a site today which I couldn't seem to fix, then I moved to 1.2.3 and it worked fine.

Daniel Jomphe
  • 16,991
  • 5
  • 29
  • 30
JxM
  • 514
  • 2
  • 5
  • @JonMack Selectivizr is awesome! worked straight away with no input from me apart from adding in the reference to the script file! – Ben Apr 25 '12 at 08:26
  • @JonMack Worked brilliantly, thanks for this. Don't get why it needs two scripts, but nvm it works! – Claire Aug 21 '12 at 10:41
  • Selectivizr looks very promising, but is it possible it doesn't work with jQuery 1.10.x? – ProblemsOfSumit Aug 07 '13 at 13:40
5

IE8 (and below) doesn't support :nth-child(), but does support :after. However, because you're using :nth-child() before :after in your selector, IE8 won't run it.

You could use a JavaScript solution by adding a class to that row, or a library that adds support for these selectors.

Bojangles
  • 99,427
  • 50
  • 170
  • 208
2

You can use :first-child instead of :nth-child(1) this has better support in IE7+

See also http://quirksmode.org/css/firstchild.html

c4urself
  • 4,207
  • 21
  • 32
0

ie9.js sounds like the best solution but you could also just add a class to the cells, eg

<tr>
    <td class='first-cell'>stuff</td><td class='second-cell>stuff</td>
</tr>
<tr>
    <td class='first-cell'>stuff</td><td class='second-cell>stuff</td>
</tr>

.first-cell {
    font-weight: bold;
}
.second-cell {
    font-weight: normal;
}
omarjebari
  • 4,861
  • 3
  • 34
  • 32