[Résolu] A:first-child ne fonctionne pas?

Bonjour,

J'ai un soucis avec first-child...voici mon code:

<ul id="menu">
    <li><a href="" title="Lien">Lien</a></li>
    <li><a href="" title="Lien">Lien</a></li>
    <li><a href="" title="Lien">Lien</a></li>
</ul>

#menu a {
    display: block;
    color: #666666;
    text-decoration: none;
    text-transform: uppercase;
    border-top: 1px solid #d9d7d5;
}

Si j'essaye:

#menu a:first-child {
    background: red;
}

Ca ne fonctionne pas, tout mes liens ont un fond rouge...

Si je test ça:

#menu li:first-child {
    background: red;
}

Ca fonctionne, le 1er <li> à un fond rouge...

Alors pourquoi cela ne fonctionne pas avec les balises <a>?

Merci d'avance
Modifié par Blogger (12 Apr 2011 - 14:05)

Bonjour,

ça ne fonctionne pas parce que first-child cible le premier élément enfant de l'élément qui a la pseudo-classe.

Tes <a> n'ont pas d'enfants...
Modifié par Laurie-Anne (12 Apr 2011 - 11:57)

Parce que chacun de tes liens est ici un premier enfant de leur balise li.

Si tu veux absolument que le background rouge soit sur la balise a tu peux tester :

#menu li:first-child a{ 
    background: red; 
} 

Laurie-Anne a écrit :
Bonjour,

ça ne fonctionne pas parce que first-child cible le premier élément enfant de l'élément qui a la pseudo-classe.

Tes &lt;a&gt; n'ont pas d'enfants...

First-child ne sélectionne-t-il pas l'élément qui est le premier enfant de son parent ?
L'enfant étant le porteur de la pseudo-classe.

http://www.w3schools.com/css/sel_firstchild.asp

a écrit :
The :first-child selector is used to select the specified selector, only if it is the first child of its parent.

Modifié par maosalia (12 Apr 2011 - 12:02)

maosalia a écrit :
Parce que chacun de tes liens est ici un premier enfant de leur balise li.

Si tu veux absolument que le background rouge soit sur la balise a tu peux tester :

#menu li:first-child a{ 
    background: red; 
} 

Super ça fonctionne, merci beaucoup