Fix for Nth-Child(n)

Asked

Viewed 45 times

2

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

css css3

1 answer

5


Via CSS, the method used when supporting Internet Explorer 7 and 8 was by 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>

Also in the Jsfiddle.

Browser other questions tagged css css3

You are not signed in. Login or sign up in order to post.