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.

Solution 1

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.

Solution 2

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