Latest web development tutorials

CSS pseudo-éléments

CSS pseudo-élément est utilisé pour ajouter des effets spéciaux sélecteurs.

grammaire

Pseudo-élément de syntaxe:

selector:pseudo-element {property:value;}

classes CSS peuvent également utiliser les pseudo-éléments:

selector.class:pseudo-element {property:value;}

: Première ligne pseudo-élément

"Première ligne" pseudo-élément est utilisé pour mettre en place un style spécial à la première ligne de texte.

Dans l'exemple suivant, le navigateur sera basé sur "première ligne" pseudo-élément dans le style de la première ligne d'un format éléments p texte:

Exemples

p:first-line
{
color:#ff0000;
font-variant:small-caps;
}

Essayez »

Note: "première ligne" pseudo-élément ne peut être utilisé pour des éléments de niveau bloc.

REMARQUE: Les propriétés suivantes peuvent être appliquées à la "première ligne" pseudo-élément:

  • propriétés de police
  • propriétés de couleur
  • propriétés de fond
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • clair

: Première lettre pseudo-élément

"Première lettre" pseudo-élément est utilisé pour mettre en place un style spécial à la première lettre du texte:

Exemples

p:first-letter
{
color:#ff0000;
font-size:xx-large;
}

Essayez »

Note: "first-letter" pseudo-élément ne peut être utilisé pour des éléments de niveau bloc.

REMARQUE: Les propriétés suivantes peuvent être appliquées à la "première lettre" pseudo-élément:

  • propriétés de police
  • propriétés de couleur
  • propriétés de fond
  • propriétés de marge
  • propriétés de rembourrage
  • propriétés de bordure
  • text-decoration
  • vertical-align (uniquement si "float" est "none")
  • text-transform
  • line-height
  • flotteur
  • clair

Les pseudo-éléments et des classes CSS

Les pseudo-éléments peuvent être combinés avec des classes CSS:

p.article:first-letter {color:#ff0000;}

<p class="article">A paragraph in an article</p>

L'exemple ci-dessus fera toute la classe comme la première lettre de l'article de l'alinéa devient rouge.

Les pseudo-éléments multiples

Une pluralité de pseudo-éléments peuvent être combinés à utiliser.

Dans l'exemple suivant, le premier paragraphe de la lettre sera affichée en rouge, la taille de la police est xx-large. La première ligne du reste du texte sera bleu, et les petites lettres majuscules.

Les paragraphes de texte dans la taille de la police par défaut et la couleur à afficher:

Exemples

p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
p:first-line
{
color:#0000ff;
font-variant:small-caps;
}

Essayez »

CSS -: avant pseudo-élément

"Avant" pseudo-élément peut insérer un nouveau contenu en face du contenu de l'élément.

L'exemple ci-dessous pour insérer une image en face de chaque <h1> élément:

Exemples

h1:before
{
content:url(smiley.gif);
}

Essayez »

CSS -: après pseudo-élément

": Après" pseudo-élément peut insérer un nouveau contenu après que le contenu de l'élément.

Les exemples suivants insérer une image après chaque <h1> élément:

Exemples

h1:after
{
content:url(smiley.gif);
}

Essayez »

Toutes les CSS pseudo-classes / éléments

sélecteur exemple L'exemple montre
: lien a:link Sélectionnez tous les liens non visités
: visited a:visited Sélectionnez tous les liens visités
: actif a:active Select est un lien actif
: hover a:hover Placez la souris sur l'état de liaison
: focus input:focus Après avoir sélectionné l'élément d'entrée a le focus
: First-letter p:first-letter Sélectionnez la première lettre de chaque élément <p>
: First-line p:first-line Sélectionnez la première ligne de chaque élément <p>
: First-child p:first-child <] P> élément sélecteur correspond à tout élément appartenant au premier élément enfant
: avant p:before Insérez le contenu avant de chaque élément <p>
: après p:after Insérez le contenu après chaque élément <p>
: Lang (langue) p:lang(it) sélection de l'attribut lang élément <p> à une valeur de départ