how to use first child in my code?

Question

In this example http://jsfiddle.net/eFhRE/1/ I wan't to make the a tag with id shoshone red with help of :first-child. Must be only the a tag with id shoshone and only with the use of :first-child. The rest of the a tags must remain blue.

Here is the html code:

<ul>
  <li class="mosonkhani">
    <a id="shoshone" href="#">Potsmare</a>
    <ul>
      <li><a href="#">Lorem</a></li>
      <li><a href="#">Ipsum</a></li>
      <li><a href="#">Dolores</a></li>
      <li><a href="#">Quiddam</a></li>
    </ul>
  </li>
</ul>

This is the css code I have tried with:

a { color:#00f; }
.mosonkhani:first-child {
  color:#f00;
}

How to do this?

Answer 1

.mosonkhani > :first-child {
  color:#f00;
}

You want the first child within .mosonkhani. What you had was an element with class mosonkhani which is also the first child.

http://jsfiddle.net/eFhRE/3/