How to Make Internet Explorer 8 to Support Nth Child() CSS Element

How to make Internet Explorer 8 to support nth child() CSS element?

You can use http://selectivizr.com/ JS which support css3 selector for IE.

IE8 :nth-child and :before

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.

How to handle nth-child for internet explorer 8

As Andy mentioned in the comments you can find out to which elements you have to add a class with PHP. All you need is a modulo division.

A pure CSS-Solution requires you to improve your HTML. It is obviously a list of images, therefore: Use a list. The resulting HTML should look something like this:

<ul class="gallery_container">
    <li>
        <a href='business-profile.php?business_id=$parent' class='gallery_darken'><img src='$mainthumb' alt='$alt' title='$description' /></a>
    </li>
    <li>
        <a href='business-profile.php?business_id=$parent' class='gallery_darken'><img src='$mainthumb' alt='$alt' title='$description' /></a>
    </li>
    <li>
        <a href='business-profile.php?business_id=$parent' class='gallery_darken'><img src='$mainthumb' alt='$alt' title='$description' /></a>
    </li>
    […]
</ul>

In the CSS now remove your :nth-child rule and instead add the following two rules:

.gallery_container {
    margin: 0 0 0 -20px;
    padding: 0;
    list-style: none;
}
.gallery_container > li {
    margin: 0 0 0 20px;
    padding: 0;
    float: left;
}

How would this nth-child selector work in IE 8?

Instead of using such a complex CSS-selector, with the drawbacks of lacking support in older browsers, there are possible workarounds to look into. I've put together a small example of how you can achieve what I believe is the desired result, without using the selector.

Below example will have six elements on each row, with a margin separating each element, but without a margin before the first element or after the last element on each row.

Markup:

<div class="foo">
    <div class="bar">A</div>
    <div class="bar">A</div>
    <div class="bar">A</div>
    <div class="bar">A</div>
    <div class="bar">A</div>
    <div class="bar">A</div>
    <div class="bar">A</div>
    <div class="bar">A</div>
    <div class="bar">A</div>
    <div class="bar">A</div>
    <div class="bar">A</div>
    <div class="bar">A</div>
    <div class="clear"></div>
</div>

CSS:

.foo {
    background-color: #ccc;
    width: 180px;
    margin: 0 -10px;
}

.bar {
    background-color: #888;
    float: left;
    margin-left: 10px;
    width: 20px;
}

.clear {
    clear: both;
}

Live example

It might not be exactly what you want, but it will at least work as a starting point for you to adapt and develop further.

Update:

There are better ways to clear the float, that could be used instead of an extra element as used in my example (I used it just for simplicity). If interested, here is an SO question on that.

How to use :nth-last-child in IE8?

CSS-only solution not possible, you are dealing with browsers that are way too old. On the upside, you don't need your own script as Selectivzr does just this, or alternatively the all-in-one solution that is IE9.js (fixes a ton of other IE bugs, not just add new selectors).

nth-child doesn't work in IE7/IE8

That's because :nth-child isn't supported in IE7/IE8.

One solution to this problem would be to use Selectivizr.

"Selectivizr is a JavaScript utility that emulates CSS3 pseudo-classes
and attribute selectors in Internet Explorer 6-8."

All you need to do is include the Selectivizr script and, if you aren't already using one, decide which JavaScript library you'd like to use (jQuery, Mootools etc.) and you will have support for the :nth-child selector (amongst various other pseudo-selectors/attribute selectors) in IE6 through to IE8.

Edit:

In reply to your comment, here's a quick tutorial showing you how to set up and use Selectivizr.

css property tr:nth-child(even) does not work on IE 8

Sine :nth-child is not supported in IE8 you will need to alter the markup.

Define a class .odd or .even and apply the class to every other row in the markup.

Then alter your css:

tr:nth-child(even), .odd 
{
    background-color:#F4F4F4;
}

IE8: making the `nth-child` selector work inside media queries?

Okay, i figured it out.

Selectivizr and Respond have both been modified to work together (1, 2).

The matter is that necessary changes have been commited to Selectivizr version 1.0.3b. As of March 2013, 1.0.3b has not been released. It is neither available on Selectivizr's official website, nor in CDNs. It can only be obtained from project's repo and only the uncompressed edition is available for now.

Respond is more prompt with releases, so the latest official version will do.

Note that Selectivizr should be included first, Respond second. And don't forget to include one of Selectivizr's requirements before Selectivizr! So the correct order is:

1. NWMatcher (or alternative)
2. Selectivizr
3. Respond

And don't use IE9.js! It has it's own implementation of media queries and together with Respond will render your site unusable in IE < 9.

---

Related Topics