How to make Internet Explorer 8 to support nth child() CSS element?

Welcome to Designers Dairy blog here i have posted how to apply nth child()  in internet explorer

IE8

Step 1:

For IE9 and IE10 browser this will works
 
.refinement_row p:first-child {
    width:35px;
}
.refinement_row p:nth-child(2) {
    width:110px;
}
.refinement_row p:nth-child(3) {
    width:26px;
}
.refinement_row p:nth-child(4) {
    margin-top:2px;
}



Step 2:

Since  IE8  browser supports nth child with  ' + ' symbol so u have to indicate first child with

normal li:first-child and  second one with   li:first-child + li and

third one with  li:first-child + li + li

.menu_navigation li:first-child {
    background-color: #998855;
}
.menu_navigation li:first-child + li {
    background-color: #c0b697;
}
.menu_navigation li:first-child + li + li {
    background-color: #a9a4a1;
}
.menu_navigation li:first-child + li +li + li {
    background-color: #00a99d;
}
.menu_navigation li:first-child + li +li + li + li {
    background-color: #6ccdc6;
}


Step4:

Output

Step3:

Enjoy Folks