IE 8 does not support nth-child, how can I solve this?

Question

IE 8 does not support nth-child, how can I solve this problem?

 #hm-top div:nth-child(1) h3 {
    color: #63c2ff;
    width: 300px;
    padding: 115px 0 0 0;
    background: url(images/trade.png) no-repeat center top;
    }

Answer 1

equivalent to li:nth-child(1)
li:first-child { /* change to this */
    border-top: 5px solid red;
}
equivalent to li:nth-child(2)
li:first-child + li { /* change to this */
    border-top: 5px solid blue;
}
equivalent to li:nth-child(3)
 li:first-child + li + li { /* change to this */
    border-top: 5px solid green;
}​

Answer 2

However, IE8 supports : first-child , which is equivalent to :nth-child(1):

#hm-top div:first-child h3 {
    color: #63c2ff;
    width: 300px;
    padding: 115px 0 0 0;
    background: url(images/trade.png) no-repeat center top;
}

Answer 3

Fix it with jQuery. Like this:

$('#hm-top div:nth-child(1) h3').addClass('ie8-nth-fix');

And in you CSS

#hm-top div:nth-child(1) h3, .ie8-nth-fix {
   color: #63c2ff;
   width: 300px;
   padding: 115px 0 0 0;
   background: url(images/trade.png) no-repeat center top;
}