Derniers tutoriels de développement web
 

CSS Les pseudo-éléments

❮ Précédent Chapitre suivant ❯

Quels sont les pseudo-éléments?

Un pseudo-élément CSS est utilisé pour le style spécifié parties d'un élément.

Par exemple, il peut être utilisé pour:

  • Style à la première lettre, ou d'une ligne, d'un élément
  • Insérez le contenu avant, ou après, le contenu d'un élément

Syntaxe

La syntaxe des pseudo-éléments:

selector::pseudo-element {
    property:value;
}
Remarque Remarquez la notation du côlon à double - ::first-line contre :first-line

Le double colon remplacé la notation unique du côlon pour les pseudo-éléments dans CSS3. Ce fut une tentative de W3C de faire la distinction entre les pseudo-classes et pseudo-éléments.

La syntaxe simple colon a été utilisé pour les deux pseudo-classes et pseudo-éléments dans CSS2 et CSS1.

Pour la compatibilité ascendante, la syntaxe simple colon est acceptable pour CSS2 et CSS1 pseudo-éléments.

Le ::first-line Pseudo-élément

Le ::first-line pseudo-élément est utilisé pour ajouter un style spécial à la première ligne d'un texte.

L'exemple suivant formate la première ligne du texte dans tous les <p> éléments:

Exemple

p::first-line {
    color: #ff0000;
    font-variant: small-caps;
}
Essayez - le vous - même »

Remarque: Le ::first-line pseudo-élément ne peut être appliqué à bloquer au niveau des éléments.

Les propriétés suivantes sont applicables à la ::first-line pseudo-élément:

  • font
  • color
  • background
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • clear

Le ::first-letter Pseudo-élément

Le ::first-letter pseudo-élément est utilisé pour ajouter un style spécial à la première lettre d'un texte.

L'exemple suivant formate la première lettre du texte dans tous les <p> éléments:

Exemple

p::first-letter {
    color: #ff0000;
    font-size: xx-large;
}
Essayez - le vous - même »

Note: Le ::first-letter pseudo-élément ne peut être appliqué à bloquer au niveau des éléments.

Les propriétés suivantes sont applicables à la ::first-letter pseudo- élément:

  • font propriétés
  • color propriétés
  • background propriétés
  • margin propriétés
  • padding propriétés
  • border propriétés
  • text-decoration
  • vertical-align (uniquement si "float" est "none" )
  • text-transform
  • line-height
  • float
  • clear

Les pseudo-éléments et des classes CSS

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

Exemple

p.intro::first-letter {
    color: #ff0000;
    font-size:200%;
}
Essayez - le vous - même »

L'exemple ci - dessus affichera la première lettre des paragraphes avec class="intro" , en rouge et dans une plus grande taille.

Les pseudo-éléments multiples

Plusieurs pseudo-éléments peuvent également être combinés.

Dans l'exemple suivant, la première lettre d'un paragraphe sera rouge, dans une taille de police de xx-large. Le reste de la première ligne sera bleu, et dans les petites capitalisations. Le reste du paragraphe sera la taille de la police par défaut et la couleur:

Exemple

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

p::first-line {
    color: #0000ff;
    font-variant: small-caps;
}
Essayez - le vous - même »

CSS - Le ::before pseudo-élément

Le ::before pseudo-élément peut être utilisé pour insérer un contenu avant que le contenu d'un élément.

L'exemple suivant insère une image avant que le contenu de chaque <h1> élément:

Exemple

h1::before {
    content: url(smiley.gif);
}
Essayez - le vous - même »

CSS - Le ::after Pseudo-élément

Le ::after pseudo-élément peut être utilisé pour insérer un contenu après que le contenu d'un élément.

L'exemple suivant insère une image après le contenu de chaque <h1> élément:

Exemple

h1::after {
    content: url(smiley.gif);
}
Essayez - le vous - même »

CSS - Le ::selection pseudo-élément

L' ::selection pseudo-élément correspond à la partie d'un élément qui est sélectionné par un utilisateur.

Les propriétés CSS suivantes peuvent être appliquées à ::selection : color , background , cursor , et les outline .

L'exemple suivant rend le texte sélectionné rouge sur fond jaune:

Exemple

::selection {
    color: red;
    background: yellow;
}
Essayez - le vous - même »

Testez-vous avec des exercices!

Exercice 1 » Exercice 2» Exercice 3 »

Tous les CSS Pseudo Elements

Sélecteur Exemple Exemple Description
::after p::after Insérer un élément après que le contenu de chacun des éléments <p>
::before p::before Insérez quelque chose avant que le contenu de chaque <p> élément
::first-letter p::first-letter Sélectionne la première lettre de chaque <p> élément
::first-line p::first-line Sélectionne la première ligne de chaque <p> élément
::selection p::selection Sélectionne la partie d'un élément qui est sélectionné par un utilisateur,

Toutes les classes CSS Pseudo

Sélecteur Exemple Exemple Description
:active a:active Sélectionne le lien actif
:checked input:checked Sélectionne tous les vérifier <input> élément
:disabled input:disabled Sélectionne toutes les personnes handicapées <input> élément
:empty p:empty Sélectionne tous les <p> élément qui n'a pas d' enfants
:enabled input:enabled Sélectionne tous les permis <input> élément
:first-child p:first-child Sélectionne tous les <p> éléments qui est le premier enfant de son parent
:first-of-type p:first-of-type Sélectionne tous les <p> élément qui est le premier <p> élément de son parent
:focus input:focus Sélectionne le <input> élément qui a le focus
:hover a:hover Sélectionne les liens de la souris
:in-range input:in-range Sélectionne <input> éléments avec une valeur dans une plage spécifiée
:invalid input:invalid Sélectionne tous les <input> éléments avec une valeur non valide
:lang(language) p:lang(it) Sélectionne tous les <p> élément avec une valeur d'attribut lang commençant par "it"
:last-child p:last-child Sélectionne tous les <p> éléments qui est le dernier enfant de son parent
:last-of-type p:last-of-type Sélectionne tous les <p> élément qui est le dernier <p> élément de son parent
:link a:link Sélectionne tous les liens non visités
:not(selector) :not(p) Sélectionne tous les éléments qui ne sont pas un <p> élément
:nth-child(n) p:nth-child(2) Sélectionne tous les <p> élément qui est le deuxième enfant de son parent
:nth-last-child(n) p:nth-last-child(2) Sélectionne tous les <p> élément qui est le deuxième enfant de son parent, à compter du dernier enfant
:nth-last-of-type(n) p:nth-last-of-type(2) Sélectionne tous les <p> élément qui est le second <p> élément de son parent, à compter du dernier enfant
:nth-of-type(n) p:nth-of-type(2) Sélectionne tous les <p> élément qui est le second <p> élément de son parent
:only-of-type p:only-of-type Sélectionne tous les <p> élément qui est le seul <p> élément de son parent
:only-child p:only-child Sélectionne tous les <p> élément qui est le seul enfant de son parent
:optional input:optional Sélectionne <input> éléments sans "required" attribut
:out-of-range input:out-of-range Sélectionne <input> éléments avec une valeur en dehors d' une plage spécifiée
:read-only input:read-only Sélectionne <input> éléments avec un "readonly" attribut spécifié
:read-write input:read-write Sélectionne <input> éléments sans "readonly" attribut
:required input:required Sélectionne <input> éléments avec un "required" attribut spécifié
:root root Sélectionne l'élément racine du document
:target #news:target Sélectionne le courant actif #news élément (cliqué sur une URL contenant ce nom d'ancrage)
:valid input:valid Sélectionne tous les <input> éléments avec une valeur valide
:visited a:visited Sélectionne tous les liens visités

❮ Précédent Chapitre suivant ❯