J’inaugure la catégorie CSS3 en commençant par un article sur les sélecteurs. Pourquoi les sélecteurs ? Parce qu’ils constituent le coeur du CSS. Si on ne les avait pas pour cibler des éléments des pages HTML on serait bien en peine pour appliquer des règles de style ou pour agir avec Javascript.

C’est un domaine qui a connu une lente évolution. Au départ on disposait seulement de sélecteurs pour les identifiant, les classes ou les types. Puis la collection s’est progressivement étendue. Avec le CSS3 on peut atteindre facilement n’importe quel élément.

Les sélecteurs du CSS3 sont maintenant pris en charge par la majorité des navigateurs modernes, même IE9 !

Plutôt que de rédiger un article long et laborieux j’ai préféré faire court tout en proposant en complément une page d’illustration dynamique. D’ailleurs si vous trouvez des bugs dans cette page merci de me les signaler pour que je les corrige.

Quant à la spécification officielle elle est ici.

Les sélecteurs relationnels

Les sélecteurs relationnels ciblent les éléments en fonction de leurs relation avec les autres éléments. Il en existe 4 :

• relation descendante (E F) : on cible tous les descendants F de E, quelle que soit la profondeur hiérarchique
• relation enfant (E > F) : on cible tous les descendants directs F de E
• relation descendante (E + F) : on cible tous les F qui suivent directement E avec le même parent
• relation descendante (E ~ F) : on cible tous les F qui suivent E avec le même parent

Les sélecteurs d’attributs

• E[attr] : on cible tous les E qui ont l’attribut attr
• E[attr=valeur] : on cible tous les E qui ont l’attribut attr égal à valeur
• E[attr^=valeur] : on cible tous les E qui ont l’attribut attr qui commence par valeur
  
• E[attr$=valeur] : on cible tous les E qui ont l’attribut attr qui finit par valeur
• E[attr~=valeur] : on cible tous les E qui ont l’attribut attr qui comprend valeur entre deux espaces
  
• E[attr*=valeur] : on cible tous les E qui ont l’attribut attr qui comprend valeur n’importe où
  

Les pseudo-classes

En dehors des pseudo-classes classiques (:hover, :focus, :visited, :link…) on en a quelques autres intéressants :

• :enabled : on cible les éléments de formulaire qui n’ont pas l’attribut disabled appliqué
• :disabled : on cible les éléments de formulaire qui ont l’attribut disabled appliqué
• :checked : on cible les éléments de formulaire les boutons radio ou cases à cocher sélectionnés
• :valid : on cible les éléments de formulaire valides (selon leur type, leur valeur, leurs attributs…)
• :valid : on cible les éléments de formulaire non valides (selon leur type, leur valeur, leurs attributs…)
• :required : on cible les éléments de formulaire qui ont l’attribut required appliqué
• :optional : on cible les éléments de formulaire qui n’ont pas l’attribut required appliqué
• :in-range : on cible les éléments de formulaire avec une plage de valeur respectée
• :in-range : on cible les éléments de formulaire avec une plage de valeur non respectée

Les pseudo-classes structurelles

Avec les pseudo-classes structurelles on peut trouver les éléments selon leur localisation :

• E:nth-child(n) : on cible les éléments E qui sont l’enfant n de leur parent
• E:nth-last-child(n) : on cible les éléments E qui sont l’enfant n de leur parent en partant de la fin
  
• E:nth-of-type(n) : on cible les éléments E qui sont l’enfant n de leur type de leur parent
  
• E:nth-of-type(odd) : on cible les éléments E impairs de leur parent
  
• E:nth-of-type(even) : on cible les éléments E pair de leur parent
  
• E:nth-of-type(xn) : on cible les éléments E qui sont l’enfant modulo n de leur parent (on peut aussi avoir xn + 1)
  
• E:nth-last-of-type(n) : on cible les éléments E qui sont l’enfant n de leur type de leur parent en partant de la fin
• E:first-child : on cible les éléments E qui sont le premier enfant de leur parent
  
• E:last-child : on cible les éléments E qui sont le dernier enfant de leur parent
  
• E:first-of-type : on cible les éléments E qui sont le premier enfant de leur type de leur parent
  
• E:last-of-type : on cible les éléments E qui sont le dernier enfant de leur type de leur parent
  
• E:only-child : on cible les éléments E qui sont le seul enfant de leur parent
  
• E:only-of-type : on cible les éléments E qui sont le seul enfant de leur type de leur parent
  
• E:not(exception) : on cible les éléments E qui ne correspondent pas à exception
  

Les pseudo-éléments

Les pseudo-éléments sont un peu particulier. Ils permettent de cibler :

• du texte présent sur la page mais non localisable avec l’arbre du DOM
• des éléments présents sur la page mais pas atteignables avec l’arbre du DOM

D’autre part il est possible avec ces pseudo-éléments de générer du contenu (avec ::before et ::after), ce qui est bien pratique dans une optique dynamique.

• ::first-letter : on cible la première lettre
• ::first-line : on cible la première ligne de texte
• ::before : on ajoute du contenu avant
• ::after : on ajoute du contenu après
• ::selection : on cible le texte sélectionné par l’utilisateur