:first-line CSS sélecteur

:first-line{ /* Propriétés */ }
::first-line{ /* Propriétés */ }

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

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

Application de :first-line

Les éléments qui acceptent le pseudo-élément CSS :first-line ont généralement un display égale à list-item, inline-block, block, table-caption ou table-cell.
Pour simplifier, le pseudo-élément CSS :first-line s'applique sur la première ligne de tous les éléments HTML ou XHTML qui sont sensés contenir directement du texte, par exemple une balise table ne peut pas contenir directement du texte, une balise td le peut.

<style>
  #beta:first-line{ color : red; /* la première ligne n'est pas sélectionnée */ }
  .inline{display:inline}
  #beta2:first-line{  color : red; /*  la première ligne est sélectionnée */ }
</style>
<div id="beta">
  <div>Première ligne</div>
  <span>Deuxieme ligne</span>
  </div>
<div id="beta2">
  <span>Première ligne</span><br>
  <span>Deuxieme ligne</span>
  </div> 

Exemple d'application d'un style Css avec :first-line :

Comprendre l'écriture de :first-line

Vous pouvez si nécessaire mettre un sélecteur devant pour conditionner la sélection, sinon les propriétés seront appliquées à l'ensemble des éléments HTML ou XHTML qui répondent à :first-line.

Pour schématiser, il faut imaginer que par défaut le pseudo-élément CSS :first-line s'écrit *:first-line. "*" représente la condition soit "n'importe première ligne" (sélectionne toutes les premières lignes sans distinction).
Donc pour conditionner plus précisément la sélection de la première ligne, 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-line{
  /* Propriétés CSS assignées à l'ensemble des premières lignes des balises P */
}
.regle:first-line{
  /* Propriétés CSS assignées à l'ensemble des premières lignes des balises ayant comme classe "regle" */
}
:disabled:first-line{
  /* Propriétés CSS assignées à l'ensemble des premières lignes 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 lignes", en mettant un chemin de sélection devant :

.identifant p:first-line{
  /* Propriétés CSS assignées à l'ensemble des premières lignes des balises P et dont le parent direct ou indirect a la classe "identifant" */
}
.identifant .regle:first-line{
  /* Propriétés CSS assignées à l'ensemble des premières lignes des balises ayant comme classe "regle" et dont le parent direct ou indirect a la classe "identifant" */
}
.identifant disabled:first-line{
  /* Propriétés CSS assignées à l'ensemble des premières lignes 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-line

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