Fix for nth-child (n)

2

Is there any fix for :nth-child(n) of CSS3? to run in IE8? Well, I have a CSS file that I used this selector, it does not only run in IE8

    
asked by anonymous 31.10.2014 / 11:32

1 answer

5

Via CSS, the method you used when supporting Internet Explorer 7 and 8 was making use of the adjacent sibling selector:

Adjacent sibling selectors + (English)

/* equivalente ao li:nth-child(1) */
ul li:first-child a {
    color:red;
}

/* equivalente ao li:nth-child(2) */
ul li:first-child + li a {
    color:blue;
}

/* equivalente ao li:nth-child(3) */
ul li:first-child + li + li a {
    color:green;
}​

/* equivalente ao li:nth-child(4) */
ul li:first-child + li + li + li a {
    color:yellow;
}​

/* ... e por ai a fora ... */

/* equivalente ao li:nth-child(1) */
ul li:first-child a {
    color:red;
}

/* equivalente ao li:nth-child(2) */
ul li:first-child + li a {
    color:blue;
}

/* equivalente ao li:nth-child(3) */
ul li:first-child + li + li a {
    color:green;
}

/* equivalente ao li:nth-child(4) */
ul li:first-child + li + li + li a {
    color:yellow;
}
<ul>
    <li>
        <a href="#">Vermelho</a>
    </li>
    <li>
        <a href="#">Azul</a>
    </li>
    <li>
        <a href="#">Verde</a>
    </li>
    <li>
        <a href="#">Amarelo</a>
    </li>
</ul>

Example also in JSFiddle .

    
31.10.2014 / 12:18