Question

I’m using nth-child in my css code, but it does not work in IE 8.
I know IE 8 can’t handle nth-child but I need to find a way to make it work.

Here’s my code :

.paypalshop .shop-groups li:nth-child(1){
  float:left;
  border: 1px solid #ccc;
  width:200px;

   }

.paypalshop .shop-groups li:nth-child(2){
  float:left;
  border: 1px solid #ccc;
  width:150px;
   }

.paypalshop .shop-groups li:nth-child(3){
  float:left;
  border: 1px solid #ccc;
  width:210px;
   }

.paypalshop .shop-groups li:nth-child(4){
  float:left;
  border: 1px solid #ccc;
  width:200px;
   }

.paypalshop .shop-groups li:nth-child(5){
  float:left;
  border: 1px solid #ccc;
  width:70px;
   }

.paypalshop .shop-groups li:nth-child(6){
  float:left;
  border: 1px solid #ccc;
  width:105px;
   }

.paypalshop .shop-groups li:nth-child(7){
  float:left;
  border: 1px solid #ccc;
  width:154px;
   }

.paypalshop .shop-groups li:nth-child(8){
  float:left;
  border: 1px solid #ccc;
  width:130px;
   }   

.paypalshop .shop-groups li:nth-child(9){
  float:left;
  border: 1px solid #ccc;
  width:220px;
   }
.paypalshop .shop-groups li:nth-child(10){
  float:left;
  border: 1px solid #ccc;
  width:220px;
   }

So what I need is to find a way to make the nth-child function work on IE 8. Is there any jQuery method I could use to make it work on IE 8?

Thank you!

Answer 1

Yes use the :nth-child selector

http://api.jquery.com/nth-child-selector/

with the css change

http://api.jquery.com/css/

e.g.

$("paypalshop .shop-groups li:nth-child(2)").css("width":"150px","float":"left","border":"1px solid #ccc");