Comment accéder au nième élément via CSS dans IE6 + 7

Question

Je veux savoir comment nous pouvons accéder n élément d'un <li> en utilisant CSS dans IE6/IE7.

HTML:

<ul class="myUL"> 
    <li><a href="" target="">Link1</a></li> 
    <li><a href="">Link2</a></li> 
    <li><a href="">Link3</a></li> 
</ul> 

Supposons maintenant que je veux accéder Lien2, comment faire? Note: Sans utiliser javascript.Seulement via CSS.

Answer 1

Vous ne pouvez pas. Donnez-lui un nom de classe unique.

Vous pouvez faire :first et :last mais pas n'th et je ne suis pas sûr qu'ils travaillent dans IE6 non plus.

<ul class="myUL"> 
    <li class="link1"><a href="" target="">Link1</a></li> 
    <li class="link2"><a href="">Link2</a></li> 
    <li class="link3"><a href="">Link3</a></li> 
</ul> 

et CSS, référence ul.myUl li.link2

Answer 2

Comme Ian corretly dit, ne peut pas le faire avec CSS statique. Vous pouvez cependant utiliser JavaScript.

HTML:

<ul class="myUL" id="myUL"> 
    <li><a href="" target="">Link1</a></li> 
    <li><a href="">Link2</a></li> 
    <li><a href="">Link3</a></li> 
</ul> 

JS:

var n = 2; 
nthElem = getElementById("myUL").childNodes[n-1]; 
nthElem.style = "color: red"; 
//or 
nthElem.className = "cssClassForNthElem"; 

Answer 3

Tout comme Ian dit, cela est impossible dans IE6 et IE7 AFAIK ainsi. IE7 et IE8 supportent réellement le sélecteur :first-child de CSS 2.1 (je suis sûr que vous pouvez deviner ce que cela fait), mais pas :nth-child ni :last-child qui sont CSS 3.