Pages

first-chid : how to

 

En cours et TD, j'ai insisté sur le fait que les sélecteurs doivent répondre à une problématique précise.

Nous allons découvrir l'intérêt de disposer du sélecteur first-child

L'utilisation des speudo-classes first est particulièrement efficace dans la construction de menu. Elle permet de distinguer le premier élément de la liste et de lui affecter un style particulier.

La figure ci-dessus montre le résultat de l'application d'un bord arrondi au premier <a> de la liste du menu.


nav li:first-child a {
    border-bottom-left-radius10px;
    border-bottom-right-radius0;
    border-top-left-radius10px;
    border-top-right-radius0;
}