Alternative for Nth-Child for Older Ie Browsers

Alternative for nth-child for older IE browsers

You can use jQuery's :nth-child() selector;

$("li:nth-child(even)") // target even li's
$("li:nth-child(odd)") // target odd li's
$("li:nth-child(5n)") // target the fifth li

nth-child selector replacement in IE

Place this script at the end of your page. It assumes the first tbody found, but you could modify this to whatever offset (or to handle multiple tbodys), or even make things easier by targetting with a specific id.

<script>
(function(){
  var 
    tby = document.getElementsByTagName('tbody')[0],
    trs = tby.getElementsByTagName('tr'),
    i, l = trs.length
  ;
  for ( i=0; i<l; i++ ) {
    if ( (i + 1) & 1 ) {
      trs[i]
        .getElementsByTagName('td')[0]
          .style
            .backgroundColor = '#f0f0f0'
      ;
    }
  }
})();
</script>

The above could be minified if you are worried about bytes.

Nth-of-type alternative for IE8

Ended up using https://github.com/keithclark/JQuery-Extended-Selectors in an IE conditional statement. It's working now.

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.

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

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.

What is the replacement for the child selector?

I've come across something of a hack: http://meyerweb.com/eric/thoughts/2005/05/31/universal-child-replacement/
Using the 'star html' hack for IE (6 and below) in combination with this allows me to select the direct child. Let's say we want to apply a padding-top of 10px to the direct child, F, of E:

* html body E F
{
    /* apply style here for IE 6 */
    padding-top: 10px;
    /* This applies the style to every F inside of E */
}
* html body E * F
{
    /* undo style here */
    padding-top: 0px;
    /* This will undo the style set above for every F that has something in between itself and E, that is, every F besides the direct children of E */
}

I do appreciate your responses so far but as much as I hate to accept my own answer, this was the solution I eventually settled on. Thanks guys!

:nth-of-type() in jQuery / Sizzle?

/**
 * Return true to include current element
 * Return false to exclude current element
 */
$.expr[':']['nth-of-type'] = function(elem, i, match) {
    if (match[3].indexOf("n") === -1) return i + 1 == match[3];
    var parts = match[3].split("+");
    return (i + 1 - (parts[1] || 0)) % parseInt(parts[0], 10) === 0;
};

Test case - (check in IE or rename the selector)

You can of course add even & odd too:

match[3] = match[3] == "even" ? "2n" : match[3] == "odd" ? "2n+1" : match[3];

​

---

Related Topics