CSS : first-child

La pseudo-classe CSS first-child permet de modifier le style de la première occurence d’un élement.

#mon_identifiant:first-child {
color:chocolate;
font-style: italic;
}

First-child est un pseudo-élément (qui fait référence à des parties de texte qui ne sont pas forcément délimités par des balises HTML).

Exemple :

CSS
#latin span:first-child {
color:chocolate;
}
HTML
<p id="latin">
Lorem <span>ipsum dolor</span> sit amet, consectetur adipiscing elit. Suspendisse pharetra placerat felis, quis auctor urna lobortis eu. Mauris id nunc ac <span>quam sollicitudin</span> varius. Mauris eget erat vitae purus lacinia egestas. Proin nibh nisl, dictum vitae lacinia quis,consectetur congue elit.
</p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra placerat felis, quis auctor urna lobortis eu. Mauris id nunc ac quam sollicitudin varius. Mauris eget erat vitae purus lacinia egestas. Proin nibh nisl, dictum vitae lacinia quis,consectetur congue elit.

1 Commentaire pour cet article.

  1. radinor
    Le 3 avril 2011 à 18:34.

    Bonjour, j’ai beaucoup de mal avec first-child et je ne trouve pas beaucoup de réponses sur les sites.
    Je n’ai pas trouvé de définition enfant au sens HTML et tous les exemples que je trouve s’empressent de définir une relation parent enfant en CSS. J’espère que ces gens là ne croient pas que c’est une obligation ?
    Je vous joins un exemple ou le père est implicitement définit par HTML et qui me semble fonctionner (sur votre modèle en enlevant l’dentificateur)

    salutations

    span:first-child {
    color:chocolate;
    }

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra placerat felis, quis auctor urna lobortis eu. Mauris id nunc ac quam sollicitudin varius. Mauris eget erat vitae purus lacinia egestas. Proin nibh nisl, dictum vitae lacinia quis,consectetur congue elit.

Laisser un commentaire