CODEWITHSUNDEEP
cssinternet-explorer-8css-selectors
smogg
smogg

Reputation: 1494

IE8 :nth-child and :before

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?

Upvotes: 65

Views: 82427

Answers (6)

JxM
JxM

Reputation: 513

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.

Upvotes: 6

omarjebari
omarjebari

Reputation: 5499

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;
}

Upvotes: 0

Niko
Niko

Reputation: 574

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]-->

Upvotes: 29

thirtydot
thirtydot

Reputation: 228162

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.

Upvotes: 256

c4urself
c4urself

Reputation: 4287

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

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

Upvotes: 2

Bojangles
Bojangles

Reputation: 101473

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.

Upvotes: 5

Related Questions