Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

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écrites sur cette page.

Pseudo-classes de réactivité.

  • :active {...}

    Désigne l'élément actif : celui qui est cliqué, pendant le temps que le bouton de la souris est enfoncé. L'exemple ci-dessous présente des éléments de différents types : un lien, des zones de saisie, un paragraphe. Cliquez sur ces éléments et maintenez le bouton enfoncé pour voir l'effet de la pseudo-classe :active.

    Lien vers cette page.



    Presque tous les types d'élément peuvent être activés même si le clic n'a aucun effet. Ici un paragraphe (balise p).

    Reportez-vous à la page :active pour des explications plus détaillées et des exemples d'utilisation.

  • :hover {...}

    Désigne l'élément sur lequel la souris est positionnée, que le bouton soit enfoncé ou pas. Attention ! Certains navigateurs ne traitent :hover que sur les balises a ou input. L'exemple ci-dessous comporte deux zones de saisie (balises input type="text") et cinq éléments div.

    1
    2
    3

    Pour des explications plus complètes au sujet de cette pseudo-classe, reportez-vous à la page :hover.

Pseudo-classes relatives à l'arbre des éléments.

  • :root {...}

    Désigne l'élément racine. En HTML :root désigne l'élément html qui est l'élément racine de toute page HTML correctement construite.

    Reportez vous à la page :root pour plus d'infos sur cette pseudo-classe.

  • :first-child {...} :last-child {...} :nth-child(4) {...} :nth-last-child(3) {...}

    Ces quatre pseudo-classes désignent l'un des enfants :

    1. :first-child : le premier enfant.
       
    2. :last-child : le dernier enfant.
       
    3. :nth-child(n) : l'élément enfant dont le numéro est indiqué. La numérotation commence à 1. :nth-child(1) est donc équivalent à :first-child.
       
    4. :nth-last-child(n) : l'élément enfant dont le numéro est indiqué, en décomptant à partir de la fin. :nth-last-child(1) est équivalent à :last-child.

       
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10

    Plus d'informations et d'exemples d'utilisation de ces pseudo-classes : voir les pages :first-child et :nth-child().

  • :first-of-type {...} :last-of-type {...} :nth-of-type(4) {...} :nth-last-of-type(3) {...}

    Ces quatre pseudo-classes désignent l'un des enfants :

    1. :first-of-type : le premier enfant dans chaque type.
       
    2. :last-of-type : le dernier enfant dans chaque type.
       
    3. :nth-of-type() : l'élément enfant dont le numéro est indiqué, en ne comptant que les éléments de type identique.
       
    4. :nth-last-of-type()} : l'élément enfant dont le numéro est indiqué, en décomptant à partir de la fin les éléments de type identique.

       

    Exemple d'utilisation de :first-of-type et :last-of-type :

    1
    (div)
    2
    (div)
    3
    (div)

    4
    (p)

    5
    (p)

    6
    (div)

    Exemple d'utilisation de :nth-of-type() et :nth-last-of-type() :

    1
    (div)
    2
    (div)
    3
    (div)

    4
    (p)

    5
    (p)

    6
    (div)
    7
    (div)

    Vous trouverez d'autres exemples d'utilisation de ces pseudo-classes sur les pages :first-of-type et :nth-of-type().

  • :only-child {...} :only-of-type {...}

    Ces deux pseudo-classes désignent respectivement les éléments qui sont enfant unique de leur parent, et les éléments qui sont les enfants uniques dans leur type.

    1
    (div)
    2
    (div)
    3
    (div)

    4
    (p)

    5
    (div)
    1
    (div)

    Voyez les pages :only-child et :only-of-type pour des exemples d'utilisation de ces deux pseudo-classes.

  • :empty {...}

    Désigne les éléments vides. Exemple : td:empty désigne les cellules de tableau vides. Un ou plusieurs espaces suffisent à "remplir" l'élément.

    1
    3
    4
    5
    7

    La pseudo-classe :empty est décrite plus en détail sur la page :empty.

Pseudo-classes pour la mise en page à l'impression.

  • @page:left {...} @page:right {...} @page:first {...} @page:blank {...}

    Ces pseudo-classes désignent respectivement les pages de gauche (pages paires), les pages de droite (pages impaires), la première page et les pages vides.

    Leur effet n'est visible que sur les impressions ou sur les aperçus. peu de propriétés sont acceptées avec ces sélecteurs : margin, size, et quelques autres.

    Reportez-vous au sélecteur @page et à la page relative à ces pseudo-classes :left pour des explications complémentaires.

Pseudo-classes relatives aux zones de saisie.

    Dans les exemples ci-dessous, les éléments ciblés par la pseudo-classe sont encadrés en rouge. N'hésitez pas à cliquer, cocher ou décocher les cases pour bien comprendre le rôle de chacun de ces sélecteurs. En approchant la souris d'un élément (sans cliquer), vous affichez le code HTML de cet élément.

  • :focus {...}

    Désigne la balise input qui a le focus (celle qui reçoit les saisies au clavier).

       

    Reportez-vous à la page sur :focus pour des explications plus détaillées.

  • :focus-visible {...}

    Désigne la balise input qui a le focus, lorsqu'elle a été atteinte avec la touche tabulation, et non pas par un clic de souris. C'est en tout cas ce que montre l'expérimentation mais cette définition nous parait imprécise.

    De plus cette pseudo-classe n'est pour l'instant traitée que par Firefox sous le nom -moz-focusring. Voir le tableau de compatibilité de :focus-visible.

       

    Consultez à la page :focus-visible pour des explications plus détaillées et des exemples d'utilisation.

  • :focus-within {...}

    Désigne l'élément dont l'un des descendants à le focus. :focus-within s'identifie le plus souvent à un élément du type form.

    Formulaire 1 :    
    Formulaire 2 :    

    Plus d'informations et d'exemples : voir la page sur la pseudo-classe :focus-within.

  • :default {...}

    Désigne les cases à cocher et les boutons radio qui sont cochés par défaut, qu'ils soient ou non cochés à ce moment.

    :default s'applique aussi aux balises select, en désignant alors l'élément sélectionné par défaut. Attention, dans ce cas, très peu de propriétés sont traitées.

       

    Des exemples plus détaillés sont disponibles sur la page :default.

  • :checked {...}

    Désigne les cases à cocher et les boutons radio qui sont cochés à ce moment.

       

    Pour des explications plus détaillées et d'autres exemples, reportez-vous à la page :checked.

  • :enabled {...} :disabled {...}

    Désigne respectivement les zones de saisie actives et les zones de saisie inactives. Les zones de saisie sont essentiellement des balises input mais plusieurs autres balises sont concernées. L'attribut disabled, lorsqu'il est présent dans le code HTML, détermine que la balise est inactive. Lorsqu'il est absent, la balise est par défaut active.

       

    Consultez la page :enabled pour des explications plus complètes et des exemples d'utilisation de ces deux pseudo-classes.

  • :required {...} :optional {...}

    Ces deux pseudo-classes désignent respectivement les balises input dont la saisie est obligatoire et celles dont la saisie est optionnelle. L'attribut avec un attribut required indique, par sa présence, une saisie obligatoire.

       

    Consultez la page :required pour des exemples d'utilisation et des explications plus complètes sur ces deux pseudo-classes.

  • :read-only {...} :read-write {...}

    ces deux pseudo-classes désignent respectivement les balises input en lecture seule, et celles qui sont en lecture.écriture. L'attribut readonly définit, par sa présence, les balises qui sont en lecture seule.

       

    Voir aussi ces exemples d'utilisation de :read-only.

  • :valid {...} :invalid {...}

    Deux pseudo-classes qui désignent respectivement les balises input contenant une valeur valide, et celles qui contiennent une valeur invalide.

    La validité de la saisie est déterminée par l'attribut pattern qui définit le masque de validation des saisies et/ou les attributs min et max qui définissent une fourchette d'acceptation pour les saisies numériques.

    La première zone ci-dessous accepte un code postal dont le format est défini sur 5 chiffres, tandis que la deuxième attend un nombre entre 5 et 10.

       

    Voir aussi d'autres exemples d'utilisation sur la page :valid.

  • :in-range {...} :out-of-range {...}

    Deux pseudo-classes qui désignent respectivement les balises input contenant une valeur incluse dans la plage d'acceptation, et celles dont la valeur est en dehors de la plage d'acceptation.

    La plage d'acceptation est définie par les attributs min et max dans le code HTML.

    La première zone attend une date sur le 20ème siècle (années 1900), tandis que la deuxième attend un nombre entre 5 et 10.

    Reportez-vous à la page :in-range pour plus de précisions et d'autres exemples d'utilisation de ces deux pseudo-classes.

  • :indeterminate {...}

    Désigne les balises input se trouvant dans un état indéterminé, comme par exemple les séries de boutons radios dont aucun n'est coché.

    Les cases à cocher peuvent également afficher un état "indéterminé" mais il doit être positionné par un code Javascript.

    Si l'utilisateur clique sur une case à cocher ou un bouton radio, celui-ci perd son état indéterminé ; il ne sera pas possible d'y revenir.

    Ce sélecteur s'applique aussi aux barres de progression (balises progress) dont l'attribut value n'est pas précisé.

    Boutons radio :
    Cases à cocher :
    Barre de progression :

    Plus d'exemples d'utilisation sur la page de la pseudo-classe :indeterminate.

  • :blank {...}

    La pseudo-classe :blank s'utilise dans deux contextes différents :

    • Elle désigne les zones de saisie vides (sans aucun contenu). Reportez-vous à la page :blank pour des explications plus détaillées.
    • Utilisée avec le sélecteur @page, la pseudo-classe :blank désigne les pages imprimées vides. Pour cette utilisation, reportez-vous à la page :left.
  • :placeholder-shown {...}

    Désigne les éléments comportant un texte d'aide à la saisie, tant que ce texte est visible (avant toute saisie). Ne pas confondre avec le pseudo-élément ::placeholder qui lui désigne le texte d'aide lui-même.

    Date : - Code postal :    

    Consultez la page :placeholder-shown pour des exemples d'utilisation et des explications plus complètes sur la pseudo-classe :placeholder-shown.

Pseudo-classes pour la restitution sonore du contenu.

  • :current {...} :future {...} :past {...}

    Ces pseudo-classes désignent respectivement les éléments en cours de lecture, ceux dont la lecture est à venir, et ceux dont la lecture est déjà faite.

    Reportez-vous à la page :current pour des explications plus détaillées sur ces trois pseudo-classes.

Pseudo-classes relatives au multi-média (vidéo ou son).

    Ces pseudo-classes concernent les éléments susceptibles d'être "lus", tel que du contenu sonore ou de la vidéo.

  • :buffering {...}

    Désigne les éléments multi-médias dont le contenu est en cours de chargement.

  • :muted {...}

    Désigne les éléments multi-médias dont le son a été coupé.

  • :playing {...}

    Désigne les éléments multi-médias en cours de restitution. Notez que les éléments en attente de leur contenu restent quand même ciblés par :playing.

  • :paused {...}

    Désigne les éléments multi-médias dont la restitution a été interrompue par l'utilisateur (mis en pause).

  • :seeking {...}

    Désigne les éléments multi-médias en train de chercher le contenu demandé.

  • :stalled {...}

    Désigne les éléments dont le chargement du contenu multimédia a échoué.

  • :volume-locked {...}

    Désigne les éléments multi-médias dont le volume sonore a été forcé à un volume donné.

Pseudo-classes pour la mise en page à l'impression.

  • @page:left {...} @page:right {...} @page:first {...} @page:blank {...}

    Ces pseudo-classes désignent respectivement les pages de gauche (pages paires), les pages de droite (pages impaires), la première page et les pages vides.

    Leur effet n'est visible que sur les impressions ou sur les aperçus. peu de propriétés sont acceptées avec ces sélecteurs : margin, size, et quelques autres.

    Reportez-vous au sélecteur @page pour des explications complémentaires.

Pseudo-classes relatives à l'état d'affichage.

  • :fullscreen {...}

    La pseudo-classe :fullscreen cible les éléments lorsqu'ils sont affichés en plein écran.

  • :modal {...}

    La pseudo-classe :modal cible les éléments lorsqu'ils sont affichés en mode modal : par dessus la page courante et en bloquant l'accès aux autres éléments de la page.

  • :picture-in-picture {...}

    Le mode picture-in-picture correspond aux vidéos qui sont affichés dans une fenêtre superposée à la page et qui ne défile pas avec celle-ci. Ce qui permet à l'utilisateur de continuer à consulter la page tout en gardant la vidéo visible.

  • Pour plus de détails, reportez-vous aux pages correspondantes : :fullscreen, :modal et :picture-in-picture.

Pseudo-classes syntaxiques.

    Il ne s'agit pas vraiment d'une pseudo-classe mais plutôt d'une syntaxe pour simplifier l'écriture des sélecteurs complexes.

  • :any() {...}

    La pseudo-classe :any() a été remplacée par :is(). (voir la spécification Selectors Level 4).

  • :is(s1,s2,s3...) {...} :-moz-any(s1,s2,s3...) {...} :-webkit-any(s1,s2,s3...) {...}

    s1, s2, s2... sont des sélecteurs.

    is() permet de grouper plusieurs sélecteurs.
    is(h1,h2,h3) est équivalent à h1,h2,h3.

    Mais l'intérêt de is() apparaît dans les syntaxes plus complexes, faisant intervenir des combinaisons de sélecteurs.

    Par exemple is(h1,h2,h3) a désigne les balises a incluses dans un titre.
    Sans is() il aurait fallu écrire h1 a, h2 a, h3 a.

    Voici quelques équivalences avec et sans l'utilisation de is() :

    Avec :is() :is(h1,h2,h3) a Sans :is() h1 a, h2 a, h3 a Avec :is() #result :is(td,th) Sans :is() #result td,#result th Avec :is() :is(#ca2019,#ca2020) :is(td,th) Sans :is() #ca2019 td, #ca2020 td, #ca2019 th, #ca2020 th

    La syntaxe standardisée est maintenant celle avec is() mais les navigateurs traitent encore les anciennes syntaxes préfixées.

  • :matches() {...}

    Le terme :matches() a été remplacé par :is(). (voir la spécification Selectors Level 4).

  • :not {...}

    L'opérateur :not() (sauf) désigne tous les éléments sauf ceux qui correspondent au sélecteur indiqué.
    L'exemple ci-dessous montre comment sélectionner tous les éléments sauf le deuxième.

    1
    2
    3
    4
    5
    6
    7

    La page :not() donne des explications plus complètes et des exemples d'utilisation de la pseudo-classe :not().

  • :where() {...}

    La pseudo-classe :where() est équivalente à :is() avec une différence dans la gestion des priorités. Reportez-vous à la page :is() pour des explications plus détaillées.

Pseudo-classes diverses.

  • :lang(it) {...}

    Désigne les éléments qui sont dans une langue spécifiée.

    Cet élément comporte l'attribut lang="fr".

    This element has the lang="en" attribute.

    Questo elemento ha l'attributo lang="it".

    Pour plus d'explications et d'autres exemples d'utilisation, reportez vous à la page :lang().

  • :dir(ltr) {...}

    Désigne les éléments en fonction de leur sens d'écriture : de droite à gauche (rtl) ou de gauche à droite (ltr). Le premier cadre doit être entouré d'un trait rouge, le cadre de droite d'un trait bleu, mais tous les navigateurs ne traient pas correctement la pseudo-classe :dir().

    Ce texte est écrit de gauche à droite (européen).
    هذا النص مكتوب من اليمين إلى اليسار (اللغات العربية).

    Plus d'informations et d'exemples, ainsi que pour un tableau de compatibilité des navigateurs, voir la page sur la pseudo-classe :dir().

  • :target {...} :target-within {...}

    Désigne l'élément dont l'id figure dans l'url.
    Des exemples d'utilisation sont présentés sur la page :target.

  • :defined {...}

    Cette pseudo-classe désigne les éléments entièrement construits. En HTML tous les éléments natifs sont considérés comme construits. La pseudo-classe :defined les sélectionne donc tous.
    Les éléments personnalisés par contre ne sont considérés comme construits que lorsqu'ils sont enregistrés.