nth-child doesn't work in IE7/IE8

Question

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

Here is a working example of my code (that works in Chrome)

Below is the CSS and HTML I am using:

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

Below example may be helpful for 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 2

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.

Answer 3

Use a polyfill such as selectivizer for the missing functionality.

1. Download it from selectivizr.com at http://selectivizr.com/downloads/selectivizr-1.0.2.zip
2. Unzip it and put the file in in your project under app/assets/javascripts
3. Reference it in your app for ie only with <!--[if (gte IE 6)&(lte IE 8)]><script type="text/javascript" src="selectivizr-min.js"></script><![endif]--> in your layout's application.js file. or...

4. For the asset pipeline you can add gem 'selectivizr-rails' to our Gemfile and then bundle install. You get the gem from https://github.com/jhubert/selectivizr-rails

   Then add the following to the head tag in your layout:

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

5. proceed as normal