Sélecteurs CSS par pseudo-classes.

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".

Pseudo-classes générales.

• :link {...} :visited {...} :any-link {...}

  Ces sélecteurs font référence aux liens hypertexte, autrement dit aux balises HTML suivantes : a, area et link.

  1. :link désigne les liens non visités.
  2. :visited désigne au contraire les liens déjà visités.
  3. :any-link désigne tous les liens.

  Lien non visité. Le lien pointe vers une page inexistante : il ne sera jamais visité.

  Lien visité (cliquez au moins une fois)

  De nombreux conflits peuvent donc apparaître, un même lien pouvant être désigné à la fois par :link ou :active, par :any-link et par un sélecteur direct sur les balises a. Les règles de résolution des conflits sont les suivantes :

  Les trois pseudo-classes :link, :active et :any-link ont la même priorité. C'est donc la règle rencontrée en dernier qui sera prise en compte.

  Les sélecteurs sur les balises a, area et link ont une priorité moindre, quelque soit leur emplacement. C'est donc toujours les règles sur les pseudo-classes qui sont prises en compte, même si elles se trouvent avant.

• :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 un lien, deux zones de saisie, et en dessous un paragraphe. Cliquez sur ces éléments pour voir l'effet la pseudo-classe :active.

  Lien vers cette page.
  
   

  :active fonctionne pour tous les types d'élément, ici un paragraphe.

• :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.

  1

  2

  3

  4

  5

• :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 la page :first-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(n) : 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(n) : l'élément enfant dont le numéro est indiqué, en décomptant à partir de la fin les éléments de type identique.
     
      
  1
  (div)

  2
  (div)

  3
  (div)

  4
  (p)

  5
  (p)

  6
  (div)

  7
  (p)

  8
  (div)

  9
  (div)

  10
  (div)

• :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)

• :lang(it) {...}

  Désigne les éléments qui sont dans la langue spécifiée, donc ceux qui comportent l'attribut lang="..." correspondant.

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

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

• :dir(ltr) {...}

  Désigne les éléments en fonction de leur sens d'écriture : de droite à gauche (rtl) ou de gauche à droite (ltr).

  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().

• :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

• :root {...}

  Désigne l'élément racine.

• :not {...}

  Opérateur "sauf". Désigne toutes les balises sauf celles qui correspondent au sélecteur indiqué.
  L'exemple ci-dessous montre comment sélectionner tous les éléments qui ne sont pas vides.

  1

  3

  4

  5

  7

• :target {...}

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

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.

          

• :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.

          
• :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.

          Lundi  Mardi  Mercredi  Jeudi  Vendredi  Samedi  Dimanche       

• :checked {...}

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

            

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

  Désigne respectivement les balises input actives ou les balises inactives. L'attribut disabled, lorsqu'il est présent, détermine les balises inactives. Lorsqu'il est absent, la balise est active.

           

• :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.

         

• :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 un 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 (5 chiffres) tandis que la deuxième attend un nombre entre 5 et 10.

        

  Voir aussi d'autres exemples d'utilisation sur la page :read-only.

• :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.

  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.

    

• :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.

• :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 :      

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

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

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

  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-classe syntaxique.

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

• :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() :

  Syntaxes avec is()	Syntaxes équivalentes
  :is(h1,h2,h3) a	h1 a, h2 a, h3 a
  #result :is(td,th)	#result td,#result th
  :is(#ca2019,#ca2020) :is(td,th)	#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.