Pseudo-classes CSS

Qu'est-ce qu'une pseudo-classe ?

Les pseudo-classes sont utilisées pour définir les états spéciaux des éléments.

Par exemple, il peut être utilisé pour :

  • Définir le style de l'élément lorsque le curseur est dessus
  • Définir des styles différents pour les liens visités et non visités
  • Définir le style de l'élément lorsque celui-ci est mis au point
Placez le curseur dessus

Grammaire

Grammaire des pseudo-classes :

selector:pseudo-class {
  property: value;
}

Pseudo-classe d'ancre

Les liens peuvent être affichés de différentes manières :

Exemple

/* Lien non visité */
a:link {
  color: #FF0000;
}
/* Lien visité */
a:visited {
  color: #00FF00;
}
/* Lien au survol */
a:hover {
  color: #FF00FF;
}
/* Lien sélectionné */
a:active {
  color: #0000FF;
}

Essayez-le vous-même

Attention :a:hover Doit être après la définition CSS a:link et a:visited Pour prendre effet !a:active Doit être après la définition CSS a:hover Pour prendre effet après ! Les noms des pseudo-classes ne sont pas sensibles à la casse.

Pseudo-classes et classes CSS

Les pseudo-classes peuvent être combinées avec les classes CSS :

Quand vous placez le curseur sur le lien de l'exemple, il change de couleur :

Exemple

a.highlight:hover {
  color: #ff0000;
}

Essayez-le vous-même

Survol de <div>

Utilisé sur l'élément <div> :hover Exemple de pseudo-classe :

Exemple

div:hover {
  background-color: blue;
}

Essayez-le vous-même

Infobulle simple au survol

Placez le curseur sur l'élément <div> pour afficher l'élément <p> (comme un effet d'infobulle) :

Placez le curseur dessus pour afficher l'élément <p>.

Hé, je suis ici !

Exemple

p {
  display: none;
  background-color: yellow;
  padding: 20px;
}
div:hover p {
  display: block;
}

Essayez-le vous-même

CSS - pseudo-classe :first-child

:first-child Les pseudo-classes correspondent à l'élément spécifié : l'élément est le premier enfant d'un autre élément.

Correspond au premier élément <p>

Dans les exemples suivants, le sélecteur correspond à tous les éléments <p> qui sont le premier enfant de n'importe quel élément:

Exemple

p:first-child {
  color: blue;
}

Essayez-le vous-même

Correspond à tous les éléments <i> des éléments <p>

Dans les exemples suivants, le sélecteur correspond à tous les éléments <i> situés dans le premier élément <i> d'un élément <p>:

Exemple

p i:first-child {
  color: blue;
}

Essayez-le vous-même

Correspond à tous les éléments <i> des premiers éléments <p>

Dans les exemples suivants, le sélecteur correspond à tous les éléments <i> situés dans un élément <p> qui est le premier enfant d'un autre élément:

Exemple

p:first-child i {
  color: blue;
}

Essayez-le vous-même

CSS - pseudo-classe :lang

:lang Les pseudo-classes permettent de définir des règles spéciales pour différentes langues.

Dans les exemples suivants,:lang Définissez les guillemets pour les éléments <q> ayant l'attribut lang="en":

Exemple

<html>
<head>
<style>
q:lang(en) {
  quotes: "~" "~";
}
</style>
</head>
<body>
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
</body>
</html>

Essayez-le vous-même

Plus d'exemples

Ajouter différents styles aux liens hypertextes
Cet exemple montre comment ajouter d'autres styles aux liens hypertextes.
Utilisation de :focus
Cet exemple montre comment utiliser la pseudo-classe :focus.

Toutes les pseudo-classes CSS

Sélecteur Exemple Description de l'exemple
:active a:active Sélectionnez chaque lien actif.
:checked input:checked Sélectionnez chaque élément <input> sélectionné.
:disabled input:disabled Sélectionnez chaque élément <input> désactivé.
:empty p:empty Sélectionnez chaque élément <p> sans élément enfant.
:enabled input:enabled Choisir chaque élément <input> activé.
:first-child p:first-child Choisir chaque élément <p> qui est le premier élément enfant de l'élément parent.
:first-of-type p:first-of-type Choisir chaque élément <p> qui est le premier élément <p> de son élément parent.
:focus input:focus Choisir les éléments <input> qui ont le focus.
:hover a:hover Choisir les liens sur lesquels le curseur de la souris est posé.
:in-range input:in-range Choisir les éléments <input> ayant une valeur dans une plage spécifiée.
:invalid input:invalid Choisir tous les éléments <input> ayant une valeur invalide.
:lang(language) p:lang(it) Choisir chaque élément <p> dont la valeur de l'attribut lang commence par "it".
:last-child p:last-child Choisir chaque élément <p> qui est le dernier élément enfant de l'élément parent.
:last-of-type p:last-of-type Choisir chaque élément <p> qui est le dernier élément <p> de son élément parent.
:link a:link Choisir tous les liens non visités.
:not(selector) :not(p) Choisir chaque élément qui n'est pas un élément <p>.
:nth-child(n) p:nth-child(2) Choisir chaque élément <p> qui est le deuxième élément enfant de l'élément parent.
:nth-last-child(n) p:nth-last-child(2) Choisir chaque élément <p> qui est le deuxième élément enfant de l'élément parent, compté à partir du dernier élément enfant.
:nth-last-of-type(n) p:nth-last-of-type(2) Choisir chaque élément <p> qui est le deuxième élément <p> de l'élément parent, compté à partir du dernier élément enfant.
:nth-of-type(n) p:nth-of-type(2) Choisir chaque élément <p> qui est le deuxième élément <p> de son élément parent.
:only-of-type p:only-of-type Choisir chaque élément <p> qui est l'unique élément de type <p> de son élément parent.
:only-child p:only-child Choisir l'élément <p> unique en tant que sous-element de l'élément parent.
:optional input:optional Sélectionner les éléments <input> sans l'attribut "required".
:out-of-range input:out-of-range Sélectionner les éléments <input> avec une valeur en dehors de la gamme spécifiée.
:read-only input:read-only Sélectionner les éléments <input> spécifiant l'attribut "readonly".
:read-write input:read-write Sélectionner les éléments <input> sans l'attribut "readonly".
:required input:required Sélectionner les éléments <input> spécifiant l'attribut "required".
:root root Sélectionner l'élément racine de l'élément.
:target #news:target Sélectionner l'élément #news actif (clic sur l'URL contenant ce nom d'ancrage).
:valid input:valid Sélectionner tous les éléments <input> avec une valeur valide.
:visited a:visited Sélectionner tous les liens visités.

Tous les pseudo-éléments CSS

Sélecteur Exemple Description de l'exemple
::after p::after Insérer du contenu après chaque élément <p>.
::before p::before Insérer du contenu avant chaque élément <p>.
::first-letter p::first-letter Sélectionner la première lettre de chaque élément <p>.
::first-line p::first-line Sélectionner la première ligne de chaque élément <p>.
::selection p::selection Sélectionner la partie de l'élément sélectionné par l'utilisateur.