Nth-child does not work in IE7 / IE8

Question

I cannot get the :nth-child selector to work with IE7 / 8.

Below is a working example of my code (which works in Chrome)

The following are the CSS and HTML that I use:

CSS

 #price-list { width:98%; padding:1%; border:white 1px solid; margin:0 auto; overflow:hidden; } #price-list h4 { padding-top:20px; font-weight:400; padding-bottom:5px; } #price-list ul { width:100%; margin-bottom:10px; overflow:hidden; } #price-list li{ line-height:1.5em; border-bottom:1px dashed #C9F; float:left; display:inline; padding-top:5px; padding-bottom:5px; text-align:center; } #price-list li strong { color:#C9F; font-weight:normal; } #double-taxi li:nth-child(odd) { width:80%; text-align:left; } #double-taxi li:nth-child(even) { width:20%; } 

HTML:

 <div id="price-list"> <ul id="double-taxi"> <li><h4>North Goa</h4><strong>(Distance kms)</strong></li><li><h4>Non A/C</h4>Rs <strong>(UK &pound;)</strong></li> <li>Aldona <strong>(10 kms)</strong></li><li>250 Rs <strong> (&pound;3)</strong></li> <li>Asnora <strong>(15 kms)</strong></li><li>250 Rs <strong> (&pound;3)</strong></li> <li>Bicholim <strong>(21 kms)</strong></li><li>420 Rs <strong> (&pound;5)</strong></li> <li>Camurlim <strong>(10 kms)</strong></li><li>250 Rs <strong> (&pound;3)</strong></li> <li>Colvale <strong>(10 kms)</strong></li><li>250 Rs <strong> (&pound;3)</strong></li> </ul> We DO NOT provide a taxi service. The Exchange Rate used to calculate UKP was 80Rs to the UKP and was rounded up to whole pound. </div> 

Any help would be appreciated.

Answer 1

This is because :nth-child not 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 have to do is enable the Selectivizr script and, if you are not already using it, decide which JavaScript library you want to use (jQuery, Mootools, etc.) and you will have support :nth-child (among other pseudo-selectors / attribute selectors) in IE6 to IE8.

Edit:

In response to your comment here is a quick tutorial showing how to set up and use Selectivizr.

Answer 2

Below is an example that may help you.

 //For first child // equivalent to li:nth-child(1) li:first-child a { border-top: 5px solid red; } //For second child // equivalent to li:nth-child(2) li:first-child + li a { border-top: 5px solid blue; } //For third child // equivalent to li:nth-child(3) li:first-child + li + li a { border-top: 5px solid green; }​ 

Answer 3

Use a polyfill, for example, a selector for missing functions.

• Download it from selectivizr.com at http://selectivizr.com/downloads/selectivizr-1.0.2.zip
• Unzip it and put the file in your project under app / assets / javascripts.
• Link to it in the application, i.e. only with <!--[if (gte IE 6)&(lte IE 8)]><script type="text/javascript" src="selectivizr-min.js"></script><![endif]--> in the layout.js file of the layout. or...

• For the asset pipeline, you can add the gem "selectivizr-rails" to our Gemfile and then install the package. You get a gem from https://github.com/jhubert/selectivizr-rails

  Then add the following to the header in your layout:

  <!--[if (gte IE 6)&(lte IE 8)]> = javascript_include_tag 'selectivizr' <![endif]-->

• act as usual