How to access nth element through CSS in IE6+7

Question

I want to know how we can access n^th element of an <li> using CSS in 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>

Now suppose I want to access Link2, how to do that? Note: Without using javascript.Only through CSS.

Answer 1

You can't. Give it a unique class name.

You can do :first and :last but not n'th and I'm not sure they work in IE6 either.

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

and in CSS, reference ul.myUl li.link2

Answer 2

As Ian corretly stated, can't do that with static CSS. You could however use 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

Just like Ian says, this is impossible in IE6 and AFAIK in IE7 as well. IE7 and IE8 actually support the :first-child selector from CSS 2.1 (I'm sure you can guess what that does), but not :nth-child nor :last-child which are CSS 3.