Les sélecteurs CSS par pseudo-classe.
Pseudo-classes.
Ces sélecteurs font référence à des éléments lorsqu'ils sont dans un état particulier.
Par exemple la pseudo classe :hover désigne un élément pendant le temps que la souris le survole.
Un autre exemple : le sélecteur :visited désigne les liens hypertexte, mais uniquement lorsqu'ils ont déjà été visités.
En règle générale, les pseudo-classes désignent des éléments qui sont identifiés dans le code HTML par une balise mais qui, en plus, sont dans un état particulier.
Les pseudo-classes se distinguent des pseudo-éléments en ce sens que ces derniers peuvent correspondre
à des éléments qui ne sont pas identifiés par une balise HTML.
Exemple le pseudo-élément ::first-letter désigne la première lettre d'un texte, bien qu'aucune balise HTML ne délimite cette première lettre.
On peut aussi dire que les pseudo-classes s'appliquent à des éléments entiers, dans un statut particulier, alors que les pseudo-éléments désignent des parties d'éléments.
Les sélecteurs du type pseudo-classes commencent par le caractère deux-points ( : ).
Utilisées seules, les pseudo-classes s'appliquent à toutes les balises mais il est facile de combiner un sélecteur classique avec une pseudo-classe pour en limiter la portée. Exemple :
:visited désigne tous les liens déjà visités.
.externe:visited désigne les liens déjà visités qui ont l'attribut class="externe".
Liste des pseudo-classes.
Définition de sous titres pour vidéos
:future
Pseudo-classe qui cible les éléments situés après l'élément courant (par exemple dans le cas d'une restitution vidéo).
:past
Pseudo-classe qui cible les éléments situés avant l'élément courant (par exemple dans le cas d'une restitution vidéo).
Module CSS - Débordements
:target-current
Pseudo-classe qui cible le marquer de défilement dont la page est affichée.
Module CSS - Media paginé
:first
Pseudo-classe désignant le première page.
:left
Pseudo-classe désignant les pages de gauche (pages paires).
:right
Pseudo-classe désignant les pages de droite (pages impaires).
Module CSS - Transitions d'afichage
:active-view-transition
Cible la racine du document, pandant le temps d'une transition d'affichage.
:active-view-transition-type()
Cible la racine du document, pandant le temps d'une transition d'affichage d'un certain type.
Sélecteurs
:active
Pseudo classe ciblant l'élément qui est actif (celui qui est cliqué ou touché).
:any()
Pseudo-classe obsolète. A été remplacée par la nouvelle pseudo-classe :is().
:any-link
Pseudo-classe désignant tous les liens (visités ou non).
:autofill
Pseudo-classe désignant les éléments de saisie dont le contenu a été renseigné automatiquement par le navigateur.
:blank
Pseudo classe désignant les zones de saisie vides.
:buffering
Pseudo-classe ciblant un élément en train d'attendre les données (comme une vidéo par exemple).
:checked
Pseudo-classe désignant les cases à cocher (ou boutons radio) qui sont cochés, ainsi que les éléments de menu sélectionnés.
:closed
Pseudo-classe ciblant un élément pouvant être soit ouvert, soit fermé (comme un menu
select), et qui se trouve dans l'état fermé.:default
Pseudo-classe ciblant les cases à cocher et boutons radio qui sont cochés par défaut.
:defined
Pseudo-classe désignant les éléments définis (notion variable suivant le langage).
:dir()
Pseudo-classe permettant de désigner des éléments en fonction du sens d'écriture
:disabled
Pseudo-classe ciblant les zones de saisie verrouillées (celles qui comportent l'attribut
disabled).:empty
Pseudo-classe ciblant les éléments sans contenu.
:enabled
Pseudo-classe désignant les zones de saisies non verrouillées.
:first-child
Pseudo-classe ciblant le premier enfant d'un élément dans l'ordre du document.
:first-of-type
Pseudo-classe ciblant les premiers éléments de chaque type, dans l'ordre du document.
:focus
Pseudo-classe ciblant la zone de saisie qui a le focus.
:focus-visible
Pseudo-classe ciblant la zone de saisie qui a le focus, mais uniquement si le navigateur matérialise ce focus (par une bordure plus épaisse par exemple).
:focus-within
Pseudo-classe ciblant la zone de saisie qui a le focus, ainsi que le formulaire correspondant.
:fullscreen
Pseudo-classe désignant les éléments affichés en plein écran pendant le temps où ils sont affichés en plein écran.
:has()
Pseudo-classe ciblant un élément dont au moins un des enfants correspond à l'un des sélecteurs passés en argument.
:hover
Pseudo-classe ciblant l'élément sur lequel se trouve le curseur de la souris.
:in-range
Pseudo-classe désignant les zones de saisie dont la valeur est dans la fourchette autorisée.
:indeterminate
Pseudo classe désignant les zones de saisie dont la valeur est indéterminée.
:invalid
Pseudo classe désignant les zones de saisie contenant une information invalide.
:is()
Pseudo-classe permettant de simplifier les syntaxes complexes faisant intervenir plusieurs sélecteurs.
:lang()
Pseudo-classe désignant les élément à partir de leur langue.
:last-child
Pseudo-classe ciblant le dernier enfant d'un élément, dans l'ordre du document.
:last-of-type
Pseudo-classe ciblant les derniers éléments de chaque type, dans l'ordre du document.
:link
Pseudo-classe désignant les liens hypertexte non visités.
:local-link
Pseudo-class désignant les liens internes, à l'exclusion des liens pointant vers un autre domaine.
:matches()
Pseudo-classe obsolète, remplacée par la nouvelle pseudo-classe :is().
:modal
Pseudo-classe désignant les éléments affichés en modal : qui bloquent les interactions avec les autres éléments.
:muted
Pseudo-classe désignant un élément capable de produire du son, mais dont l'utilisateur a coupé le son.
:not()
Pseudo-classe pour inverser l'action d'un sélecteur.
:nth-child()
Pseudo-classe ciblant un descendant d'après son numéro dans l'ordre du document.
:nth-col()
Pseudo-classe ciblant une des colonnes dans un container grille d'après son numéro.
:nth-last-child()
Pseudo-classe ciblant un élément à partir de son numéro, en commençant par la fin, et dans l'ordre du document.
:nth-last-col()
Pseudo-classe ciblant une des colonnes dans un container grille, en commençant le comptage par la fin.
:nth-last-of-type()
Pseudo-classe ciblant un élément à partir de son numéro en ne comptant que les éléments du même type et en commençant par la fin.
:nth-of-type()
Pseudo-classe ciblant un élément à partir de son numéro en ne comptant que les éléments du même type.
:only-child
Pseudo-classe ciblant les éléments qui sont fils uniques de leur parent.
:only-of-type
Pseudo-classe désignant les éléments qui sont fils unique de leur parent, en ne considérant que les éléments de type identique.
:open
Pseudo-classe ciblant les éléments pouvant être soit ouverts, soit fermés (comme
select), et qui se trouvent dans l'état ouvert.:optional
Pseudo élément désignant les zones de saisie non obligatoires.
:out-of-range
Pseudo-classe désignant les zones de saisie dont la valeur est en dehors de la plage autorisée.
:paused
Pseudo-classe désignant les éléments dont la lecture a été suspendue par l'utilisateur (par exemple une vidéo).
:picture-in-picture
Pseudo classe désignant un élément (le plus souvent une vidéo) affiché dans une fenêtre ne défilant pas avec le reste de la page.
:placeholder-shown
Pseudo-classe désignant les zones de saisie comportant un texte d'aide.
:playing
Pseudo-classe désignant les éléments en cours de lecture (par exemple une vidéo).
:popover-open
Pseudo-classe qui cible les éléments popover qui sont dans l'état ouvert (ou affichés).
:read-only
Pseudo-classe désignant les zones de saisie en lecture seule.
:read-write
Pseudo-classe désignant les zones de saisie en lecture écriture.
:required
Pseudo-classe désignant les zones de saisie obligatoires.
:root
Pseudo-classe ciblant l'élément racine du document (en HTML, l'élément racine est l'élément HTML).
:scope
Cible l'élément courant. Utile dans le cas de règles imbriquées (nested CSS).
:seeking
Pseudo-classe ciblant les éléments (vidéo par exemple) dont le contenu est en cours de recherche d'une position à la demande de l'utilisateur.
:stalled
Pseudo-classe désignant un élément (une vidéo par exemple) dont la lecture est interrompue à la suite d'une erreur dans l'acquisition du flux.
:target
Pseudo-classe désignant l'élément dont l'id figure dans l'url (signet).
:target-within
Pseudo-classe désignant le container parent de l'élément dont l'id figure dans l'url.
:user-invalid
Pseudo-classe désignant les zones de saisie dont la valeur est invalide.
:user-valid
Pseudo-classe désignant les zones de saisie dont la valeur est valide.
:valid
Pseudo-classe désignant les zones de saisie contenant une information valide.
:visited
Pseudo classe désignant les liens hypertexte déjà visités.
:volume-locked
Pseudo-classe ciblant un élément capable de produire du son, et dont le volume a été figé à une valeur fixe.
:where()
Pseudo-classe permettant de grouper des sélecteurs (équivalent du OU logique).