:first-letter CSS sélecteur

/* CSS 2 */
:first-letter{ /* Propriétés */ }
/* CSS 3 */
::first-letter{ /* Propriétés */ }

::first-letter{ /* CSS 3 */}

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

Qu'est que la première lettre?

Il ne faut pas prendre la première lettre au pied de la lettre.
La propriété CSS first-letter inclut aussi :

• les chiffres, le premier chiffre d'un nombre soit "1" si on a "10".
• la première lettre du contenu inclut avec :before. Prend le dessus par rapport à la première lettre du texte sans l'insertion de contenu fait avec :before.
• une combinaisons de lettres, dans certaine langue "la première lettre" peut obéir à des règles particulières. Par exemple en hollandais, la combinaison "ij" survient au début d'un mot :first-letter doit prendre en compte les deux lettres ensemble.
• un type de ponctuation (voir ci-dessou) : si la première lettre est immédiatement suivie ou précédée de cette type de ponctuation elle est incluse dans la "première lettre".

La liste des types de ponctuations est :

• la ponctuation de type Unicode open (Ps).
• la ponctuation de type Unicode close (Pe).
• la ponctuation de type Unicode initial quote (Pi).
• la ponctuation de type Unicode final quote (Pf).
• la ponctuation de type Unicode other punctuation (Po).

Comprendre l'écriture de :first-letter

Le pseudo-élément CSS :first-letter s'applique la première lettre de tous les éléments HTML ou XHTML. Vous pouvez donc si nécessaire mettre un sélecteur devant pour conditionner la sélection de la première lettre, sinon les propriétés seront appliquées à l'ensemble des éléments HTML ou XHTML qui répondent à :first-letter.

Pour schématiser, il faut imaginer que par défaut le pseudo-élément CSS :first-letter s'écrit *:first-letter. "*" représente la condition soit "n'importe première lettre" (sélectionne toutes les premières lettres 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 l'élément 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).

P:first-letter{
  /* Propriétés CSS assignées à la première lettre des balises P */
}
.regle:first-letter{
  /* Propriétés CSS assignées à la première lettre des balises ayant comme classe "regle" */
}
:disabled:first-letter{
  /* Propriétés CSS assignées à la première lettre des balises qui correspondent à la règle :disabled */
}

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

.identifant p:first-letter{
  /* Propriétés CSS assignées à la première lettre des balises P et dont le parent direct ou indirect a la classe "identifant" */
}
.identifant .regle:first-letter{
  /* Propriétés CSS assignées à la première lettre des balises ayant comme classe "regle" et dont le parent direct ou indirect a la classe "identifant" */
}
.identifant :disabled:first-letter{
  /* Propriétés CSS assignées à la première lettre des balises qui correspondent à la règle :disabled et dont le parent direct ou indirect a la classe "identifant" */
}

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

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