Les sélecteurs en CSS

Les sélecteurs en CSS.

Le sélecteur indique à quel(s) élément(s) se rapporte un ensemble de propriétés. Dans l'exemple ci-dessous la taille des caractères et la couleur du texte s'appliquent à toutes les balises h1 du document.

Principaux sélecteurs.

Sélecteur par nom de balise.

• h2 {...}

  Sélecteur par nom de balise. Tous les éléments de ce nom sont concernés.

  Les noms des balises ne sont pas sensibles à la casse : div est équivalent à DIV mais l'habitude a été prise d'écrire les balises en minuscules.

Sélecteur par identifiant.

• #logo {...}

  Le caractère # introduit un identifiant. L'élément comportant cet ID est concerné. En principe ce sélecteur ne concerne qu'un seul élément dans la page puisque l'id est censé être unique.

  Exemple : img id="logo" src="..."/.

  Le nom des identifiants est sensible à la casse : #Edito est donc différent de #edito. Les tirets et les blancs soulignés sont acceptés , ainsi que les chiffres, mais éviter de commencer un ID par un chiffre : cela perturbe certains navigateurs.

Sélecteur par classe.

• .encart {...}

  Le point introduit une classe. Tous les éléments comportant un attribut class avec cette valeur sont concernés.

  Le nom des classe est sensible à la casse. Les tirets et les blancs soulignés sont acceptés , ainsi que les chiffres, mais éviter de placer un chiffre au début d'un nom de classe : cela perturbe certains navigateurs.

  Plusieurs classes peuvent être associées à un élément HTML en les séparant par un espace :
  h1 class="titre lexique"

  Exemples :
  Sélecteurs	Éléments désignés
  .encart	p class="encart"Élément sélectionné/p p class="gauche"Non sélectionné/p p class="Encart"Non sélectionné (casse)/p div class="encart"Élément sélectionné/div div class="news encart"Élément sélectionné/div

Sélecteur par pseudo-classe.

• :hover {...}

  Le caractère : (deux points) introduit une pseudo-classe.
  La pseudo-classe désigne un élément lorsqu'il se trouve dans une certaine situation : ici lorsqu'il est survolé par la souris.

  Rien ne désigne ces éléments dans le code HTML ; c'est uniquement le contexte qui les fait correspondre au sélecteur. Les pseudo-classes sont des sélecteurs dynamiques : les éléments ne sont sélectionnés que à certains moments. Voici quelques exemples de pseudo-classes :

  1. :hover : l'élément qui est survolé par la souris.
  2. :visited : un lien lorsqu'il a déjà été visité.
  3. :checked : une case à cocher lorsqu'elle est cochée, ou un bouton radio lorsqu'il est sélectionné.

  Voir la liste complète des pseudo-class.

Sélecteur par pseudo-éléments.

• ::first-letter {...}

  Le caractère :: (double deux points) introduit un pseudo-élément, c'est à dire un élément qui n'est pas délimité par des balises mais déterminé suivant une règle. Ici il s'agira de la première lettre.

  Contrairement aux pseudo-classes, les éléments désignés par un pseudo-élément le sont en permanence. Dans notre exemple, la première lettre sera toujours la première lettre.

  Voir la liste complète des pseudo-elements.

Sélecteur universel.

• * {...}

  Le caractère * (étoile) désigne tous les éléments du document

  Ce sélecteur est délicat à utiliser seul car il détruit le mécanisme d'héritage en supprimant les valeurs inherit qui est la valeur par défaut de nombreuses propriétés.

  Voici un exemple. En écrivant les styles ci-dessous, le développeur avait manifestement l'intention de choisir la police Arial pour tous les éléments de la page, sauf pour les titres h1, h2, h3.

  Si maintenant on place un lien (balise a) dans un de ces titres, on va retrouver de l'Arial, car les éléments a ont été passés en Arial par le sélecteur étoile. Initialement la propriété font-family a la valeur inherit, ce qui évite ce genre de problème.

  * { font-family: "Arial", sans-serif; } h1,h2,h3 { font-family: "Times New Roman", serif; }

  Le sélecteur * peut cependant être intéressant avec quelques rares propriétés comme box-sizing, padding...

  Il est également intéressant en combinaison avec un autre sélecteur. Par exemple #edito * désigne tous les enfants de l'élément dont l'id est edito.

Liste de sélecteurs.

• h1, h2, h3, h4 {...}

  Liste de sélecteurs avec la virgule comme séparateur. Tous les éléments dont la balise figure dans la liste sont concernés.

Sélecteurs avec inclusion.

• table img {...}

  Plusieurs sélecteurs séparés par un espace. dans notre exemple, le sélecteur désigne les éléments img inclus dans un tableau. L'inclusion n'est pas forcément directe, il peut exister des niveaux intermédiaires : ici il y aura probablement au moins des éléments tr et td.

  Avec le code HTML ci-dessous, la première image n'est pas sélectionnée car elle n'est pas incluse dans un tableau, tandis que la deuxième et la troisième sont bien visées par le sélecteur.

  Exemple :
  td img	p img src="image1.png" / /p table tr td img src="image2.png" / /td td a href="..."img src="image3.png" //a /td tr /table

Sélecteurs avec inclusion directe.

• td>img {...}

  Plusieurs sélecteurs séparés par un caractère supérieur ( > ) désignent une inclusion directe. Dans notre exemple, le sélecteur désigne les éléments img inclus dans une cellule td. td devant être le parent direct de img.

  Avec le code HTML ci-dessous, seule la deuxième image est désignée par le sélecteur : la première n'est pas incluse dans une cellule, et pour la troisième, on trouve un élément a (lien) entre la cellule et l'image.

  Exemple :
  td>img	p img src="image1.png" / /p table tr td img src="image2.png" / /td td a href="..."img src="image3.png" //a /td tr /table

Sélecteurs de fratrie immédiate.

• h2 + p {...}

  Plusieurs sélecteurs séparés par un signe + sélectionne les éléments qui suivent immédiatement un autre. Dans l'exemple ci-dessus, le sélecteur désigne les éléments p venant immédiatement après un élément h2. p et h2 doivent avoir le même parent, d'où le nom de "fratrie".

  Exemple :
  h2 + p	section pTexte d'introduction/p h2Titre/h2 pCeci est un paragraphe..../p pCeci est un autre paragraphe...../p /section

Sélecteurs de fratrie.

• h2 ~ p {...}

  Plusieurs sélecteurs séparés par un signe ~ sélectionne les éléments qui suivent un autre, même si d'autres éléments s'intercalent entre. Dans l'exemple le sélecteur désigne les éléments p venant après les éléments h2, que ce soit tout de suite après, ou plus tard. p et h2 doivent avoir le même parent.

  Exemple :
  h2 ~ p	section pTexte d'introduction/p h2Titre/h2 pCeci est un paragraphe..../p pCeci est un autre paragraphe..../p /section

Combinaison de sélecteurs.

• div.edito {...}

  Toutes ces syntaxes sont cumulables. L'exemple ci-dessus désigne les blocs div comportant la classe edito.

  Attention aux espaces, qui peuvent changer fortement la signification du sélecteur. Le sélecteur p .edito (avec un espace) désignent les éléments inclus dans un paragraphe et qui comportent une classe edito. Ce qui, avec l'exemple de code HTML ci-dessous, ne correspond à aucun élément.

  Exemples :
  div.edito	div class="edito" pBlablabla/p pBlablabla/p /div
  div .edito	div class="edito" pBlablabla/p pBlablabla/p /div

Sélecteurs avec critère.

Les crochets [ ] introduisent un critère portant sur un attribut.

Sélecteurs sur la présence d'un attribut.

• img[ width ] {...}

  Désigne les éléments img comportant un attribut width quelle que soit la valeur de ce dernier. On teste donc seulement la présence de l'attribut.

  Exemple :
  img[alt]	img src="image1.png" alt="Logo" / img src="image3.png" / img src="image3.png" alt="" /

Sélecteurs avec critère sur la valeur d'un attribut.

• p[ lang='fr' ] {...}

  Ici on limite la portée aux éléments p qui comportent l'attribut lang avec la valeur 'fr'.

  Les opérateurs de comparaison reconnus sont :

  1. = : égalité stricte.
  2. ~= : contient le mot.
  3. *= : contient les caractères.
  4. ^= : commence par les caractères.
  5. $= : se termine par les caractères.

  Les comparaisons sont sensibles à la casse.

  Remarque : les attributs utilisables dans les critères ne sont pas forcément les standard du HTML. Il est tout à fait possible d'utiliser ses propres attributs personnalisés.

  Quelques exemples :
  Sélecteurs	Éléments désignés
  img [alt = 'logo']	img src="image.png" alt="Logo"/ img src="image.png" alt="Grand logo"/ img src="image.jpg" alt="logo"/
  img [alt ~= 'logo']	img src="image.png" alt="Logo"/ img src="image.png" alt="Grand logo"/ img src="image.jpg" alt="logo_soc"/
  img [alt *= 'logo']	img src="image.png" alt="Logo"/ img src="image.png" alt="Grand logo"/ img src="image.jpg" alt="logo_soc"/
  img [alt ^= 'logo']	img src="image.png" alt="Logo"/ img src="image.png" alt="Grand logo"/ img src="image.jpg" alt="logo_soc"/
  img [alt $= 'logo']	img src="image.png" alt="Logo"/ img src="image.png" alt="Grand logo"/ img src="image.jpg" alt="logo_soc"/
  Désigner les images au format png :
  img [src $= 'png']	img src="image.png" alt="Logo"/ img src="image.png" alt="Grand logo"/ img src="image.jpg" alt="logo_soc"/
  Désigner les liens externes :
  a [href ^= 'http']	a href="page2.php" title="Page 2"/ a href="https://www.google.com" title="Google"/ a href="index.htm" title="Index"/

Sélecteurs particuliers.

• @page {...}

  Ce sélecteur désigne la page imprimée. Peu de propriétés peuvent lui être appliquées : essentiellement margin et size.

  Le sélecteur page peut être combiné avec les pseudo-éléments :left, :right ou :first.

Compatibilité des navigateurs.

Aucun problème de compatibilité n'est à signaler à propos des sélecteurs de base, incluant :

• Le sélecteur général (*).
• Les sélecteurs par balises.
• Les sélecteur par classe.
• Les sélecteurs par id.
• Les opérateurs entre sélecteurs (>, espace, + ...).
• Les pseudo-classe :first-child, :link, :visited, :active, :hover, :focus et :lang().
• Les sélecteurs avec critère [attr="val"]. `

Afficher le tableau de compatibilité (informations fournies par canIuse.com).