:first-child CSS sélecteur

:first-child{
  /* Propriétés CSS assignées aux premiers enfants de toutes les balises HTML */
}
identifiant :first-child{
  /* Propriétés CSS assignées au premier enfant des balises HTML ayant comme parent direct ou indirect "identifiant" */
}
identifiant strong:first-child{
  /* Propriétés CSS assignées au premier enfant de type balise STRONG dont le parent a comme parent direct ou indirect "identifiant" */
}

Règles de syntaxes CSS pour :first-child.

Comprendre l'écriture du sélécteur Css :first-child

La pseudo-classe CSS :first-child s'applique au premier fils de tous les éléments HTML ou XHTML. Vous pouvez donc si nécessaire mettre un sélecteur devant pour conditionner la sélection du premier fils, sinon les propriétés seront appliquées à l'ensemble des éléments HTML ou XHTML qui répondent à :first-child.

Pour schématiser, il faut imaginer que par défaut la pseudo-classe CSS :first-child s'écrit *:first-child. "*" représente la condition soit "n'importe quel élément" (sélectionne tous les premiers fils sans distinction).
Donc pour conditionner plus précisément la sélection, il faut juste remplacer "*" par un autre sélecteur qui vous permettra de distinguer les premiers fils que vous voulez sélectionner.
Ce sélecteur doit être unique (classe, id, balise ou pseudo-classe) ou multiple à condition de ne pas contenir d'espace entre chaque sélecteur, sinon on passe dans le cas d'un chemin de sélection pour sélectionner le parent (vous comprendrez mieux avec les exemples qui suivent).

:first-child{
  /* Propriétés CSS assignées à l'ensemble des premiers enfants, de n'importe quel élément */
}
label:first-child{
  /* Propriétés CSS assignées à l'ensemble des premiers enfants de type balise LABEL, de n'importe quel élément */
}
.regle:first-child{
  /* Propriétés CSS assignées à l'ensemble des premiers enfants de classe "regle", de n'importe quel élément */
}
:checked:disabled:first-child{
  /* Propriétés CSS assignées à l'ensemble des premiers enfants qui correspondent à la règle :checked et :disabled, de n'importe quel élément */
}

Maintenant, vous pouvez être plus précis pour cibler l'élément parent dans lequel vous voulez sélectionner les premiers fils, en mettant un chemin de sélection devant :

.identifant label:first-child{
  /* Propriétés CSS assignées à l'ensemble des premiers enfants de type balise LABEL, dont le parent le parent direct ou indirect a la classe "identifant" */
}
.identifant > .regle:first-child{
  /* Propriétés CSS assignées à l'ensemble des premiers enfants de class "regle", dont le parent direct a la classe "identifant" */
}
.identifant .regle:first-child{
  /* Propriétés CSS assignées à l'ensemble des premiers enfants de class "regle", dont le parent direct ou indirect a la classe "identifant" */
}
.identifant :checked:disabled:first-child{
  /* Propriétés CSS assignées à l'ensemble des premiers enfants qui corresponde à la règle :checked et :disabled, dont le parent  direct ou indirect a la classe "identifant" */
}

Les boites anonymes et le sélécteur Css :first-child

Attention : Les boites anonymes n'apparaissent pas dans l'arbre du document, c'est pourquoi elles ne sont pas prises en compte au moment de la mise en forme du premier enfant.

Info complémentaire sur le sélécteur Css :first-child

Attention, la pseudo-classe CSS ":first-child" a une écriture un peu spéciale, "first-child" est toujours précédée de ":".

La pseudo-classe CSS :first-child ne peut pas être déclarée dans une balise HTML ou XHTML avec l'attribut HTML ou XHTML "STYLE" ou dans une feuille de style externe.
Elle se déclare dans une balise HTML ou XHTML "STYLE" de votre page :

<STYLE>
  input:first-child{}
</STYLE>

La pseudo-classe CSS :first-child peut être remplacée par la pseudo-classe CSS :nth-child()

:first-child{}
//Identique à 
:nth-child(1){}

Compatibilités navigateurs du sélecteur :first-child

Votre avis sur la définition :first-child en CSS