Как получить доступ к n-му элементу через CSS в IE6 + 7

Question

Я хочу знать, как мы можем получить доступ к n ^th элементу <li>, используя CSS в 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>

Теперь предположим, что я хочу получить доступ к Link2, как это сделать? Примечание. Без использования javascript. Только через CSS.

Answer 1

Вы не можете. Дайте ему уникальное имя класса.

Вы можете сделать :first и :last, но не n'th, и я не уверен, что они также работают в IE6.

<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>

и в CSS, ссылка ul.myUl li.link2

Answer 2

Как правильно сказал Ян, это невозможно сделать с помощью статического CSS. Однако вы можете использовать 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

Как говорит Ян, это невозможно в IE6 и AFAIK в IE7. IE7 и IE8 фактически поддерживают селектор :first-child из CSS 2.1 (я уверен, что вы можете догадаться, что это делает), но не :nth-child и :last-child, которые являются CSS 3.