CSS Pseudo-classes
Les pseudo-classes CSS sont utilisées pour ajouter des effets spéciaux à certains sélecteurs.
Syntaxe
Syntaxe des pseudo-classes
Les classes CSS peuvent aussi utiliser des pseudo-classes :
Pseudo-classes d'ancre
Dans les navigateurs qui prennent en charge CSS, les différents états des liens peuvent être affichés de différentes manières.
Exemple
Essayez-le vous-même »
Remarque :Dans les définitions CSS, a:hover doit être placé après a:link et a:visited pour être valide.
Remarque :Dans les définitions CSS, a:active doit être placé après a:hover pour être valide.
Remarque :Les noms des pseudo-classes ne sont pas sensibles à la casse.
Pseudo-classes et classes CSS
Les pseudo-classes peuvent être utilisées avec les classes CSS :
Si le lien dans l'exemple ci-dessus a été visité, il s'affichera en rouge.
Pseudo-classe CSS :first-child
Vous pouvez utiliser la pseudo-classe :first-child pour sélectionner le premier élément enfant d'un élément parent.
Remarque :Doit être déclaré dans les versions antérieures à IE8<!DOCTYPE>, afin que :first-child puisse prendre effet.
Correspond au premier élément <p>
Dans l'exemple suivant, le sélecteur correspond aux éléments <p> qui sont le premier enfant de n'importe quel élément :
Correspond au premier élément <i> dans tous les éléments <p>.
Dans l'exemple suivant, le sélecteur correspond au premier élément <i> dans tous les éléments <p> :
Correspond à tous les éléments <i> dans les éléments <p> qui sont le premier enfant.
Dans l'exemple suivant, le sélecteur correspond à tous les éléments <i> dans les éléments <p> qui sont le premier enfant d'un élément :
CSS - Pseudo-classe :lang
La pseudo-classe :lang vous permet de définir des règles spéciales pour différentes langues.
Remarque :IE8 doit déclarer<!DOCTYPE>pour prendre en charge la pseudo-classe :lang.
Dans l'exemple suivant, la classe :lang définit le type de guillemets pour les éléments q avec une valeur d'attribut no :
Plus d’exemples
Ajouter différents styles aux hyperliens
Cet exemple montre comment ajouter d'autres styles aux hyperliens.
Utilisation de :focus
Cet exemple montre comment utiliser la pseudo-classe :focus.
Toutes les pseudo-classes/éléments CSS
| Sélecteur | Exemple | Description de l'exemple |
|---|---|---|
| :checked | input:checked | Sélectionne tous les éléments de formulaire sélectionnés |
| :disabled | input:disabled | Sélectionne tous les éléments de formulaire désactivés |
| :empty | p:empty | Sélectionne tous les éléments <p> sans enfants |
| :enabled | input:enabled | Sélectionne tous les éléments de formulaire activés |
| :first-of-type | p:first-of-type | Sélectionne chaque élément p qui est le premier élément p de son élément parent. |
| :in-range | input:in-range | Sélectionne les valeurs dans une plage spécifiée d'éléments |
| :invalid | input:invalid | Sélectionne tous les éléments non valides |
| :last-child | p:last-child | Sélectionne le dernier élément enfant de tous les éléments p. |
| :last-of-type | p:last-of-type | Sélectionne chaque élément p qui est le dernier élément p de son élément parent. |
| :not(selector) | :not(p) | Sélectionne tous les éléments sauf <p> |
| :nth-child(n) | p:nth-child(2) | Sélectionne le deuxième élément enfant de l'élément parent de tous les éléments p. |
| :nth-last-child(n) | p:nth-last-child(2) | Sélectionne l'avant-dernier élément enfant de tous les éléments p. |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | Sélectionne l'avant-dernier élément enfant p de tous les éléments p. |
| :nth-of-type(n) | p:nth-of-type(2) | Sélectionne le deuxième élément enfant p de tous les éléments p. |
| :only-of-type | p:only-of-type | Sélectionne tous les éléments qui n'ont qu'un seul élément enfant qui est un élément p. |
| :only-child | p:only-child | Sélectionne tous les éléments p qui n'ont qu'un seul élément enfant. |
| :optional | input:optional | Sélectionne les attributs d'élément sans "required". |
| :out-of-range | input:out-of-range | Sélectionne les attributs d'élément dont la valeur est en dehors de la plage spécifiée. |
| :read-only | input:read-only | Sélectionne les éléments avec un attribut en lecture seule |
| :read-write | input:read-write | Sélectionne les éléments sans attribut en lecture seule |
| :required | input:required | Sélectionne les attributs d'éléments pour lesquels l'attribut "required" est spécifié. |
| :root | root | Sélectionne l'élément racine du document |
| :target | #news:target | Sélectionne l'élément #news actuellement actif (lorsque l'URL cliquée contient le nom de l'ancre). |
| :valid | input:valid | Sélectionne tous les attributs ayant des valeurs valides |
| :link | a:link | Sélectionne tous les liens non visités |
| :visited | a:visited | Sélectionne tous les liens visités |
| :active | a:active | Sélectionne le lien actif |
| :hover | a:hover | L'état lorsque la souris survole un lien |
| :focus | input:focus | Sélectionne les éléments qui ont le focus après une saisie |
| :first-letter | p:first-letter | Sélectionne la première lettre de chaque élément <p>. |
| :first-line | p:first-line | Sélectionne la première ligne de chaque élément <p> |
| :first-child | p:first-child | Le sélecteur correspond aux éléments <p> qui sont le premier enfant de n'importe quel élément. |
| :before | p:before | Insère du contenu avant chaque élément <p> |
| :after | p:after | Insère du contenu après chaque élément <p> |
| :lang(language) | p:lang(it) | Sélectionne une valeur de départ pour l'attribut lang des éléments <p>. |