Introduction
La plupart des actions de scénario utilisateur s'appliquent aux éléments présents sur vos pages web, que vous devez identifier avec précision. Dans les extraits de code HTML suivants, il y a par exemple trois éléments : une division <div>, un paragraphe <p> et un lien <a>
<div>
<p>
Cliquez <a href="page.html" class="myClass" id="myId">ici</a>
</p>
</div>
Pour cibler avec précision un élément, le Speed Analysis Lab fournit différents modes de sélection : TAG (par exemple “p”), IDENTIFIANT ("myIdentifier"), NOM (utilisé dans les formulaires web), XPATH et CSS.
La sélection CSS est le mode de sélection d'éléments le plus polyvalent et complet au sein d'une page web (à part XPATH, qui est puissant mais aussi complexe, et peu utilisé par les professionnels du web). Un sélecteur CSS peut, à lui seul, reproduire presque tous les autres modes de sélection : TAG, IDENTIFIANT, NOM et aller même plus loin.
Le but de cette section de la documentation est de vous familiariser avec les possibilités offertes par cette méthode de sélection.
Utilisation de Chrome DevTools
Notre service est basé sur Chrome, un navigateur populaire. Pour tester vos sélecteurs CSS comme dans Speed Analysis Lab, ouvrez la page pertinente dans Chrome et utilisez les outils de développement intégrés dans ce navigateur en utilisant Ctrl + Shift + I sous Windows, ou ⎇ + ⌘ + I sous macOS.
Le code HTML est visible via l’onglet “Elements” (NB : c'est le Document Object Model, ou DOM. Il représente le code source HTML de la page tel que compris par le navigateur, et après l'exécution du code JavaScript de la page qui peut l'avoir modifié).
Éléments au survol
Lorsque vous survolez un élément dans la page, il apparaîtra surligné dans l’onglet “Elements”. De même, en survolant un élément dans l’onglet “Elements”, il sera surligné dans la page web.
Recherche de sélecteurs
Dans Dev Tools, en utilisant Ctrl + F affiche une barre de recherche. Vous pouvez entrer un sélecteur CSS dans cette barre de recherche pour le vérifier. Le nombre de résultats obtenus sera indiqué dans la barre de recherche. Le premier élément trouvé sera surligné dans le code.
Copier des sélecteurs générés par le navigateur
En cliquant avec le bouton droit sur un article dans l’onglet “Éléments”, vous pouvez choisir “Copier”, puis “Copier le sélecteur”. Un sélecteur CSS sera copié dans votre presse-papier, que vous pourrez utiliser dans Speed Analysis Lab.
Faites attention cependant, ce sélecteur sera souvent très spécifique, et donc pas très robuste aux changements. Vous devrez peut-être mettre à jour ce sélecteur régulièrement. Cependant, il peut être utilisé comme base pour déterminer un sélecteur plus approprié.
Code HTML et vocabulaire
Dans l’exemple suivant :
<div>
<p>
<a href="page.html" class="myClass secondClass" id="myIdentifier">Mon lien</a>
</p>
</div>
-
<a>est un élément html composé d’un<a>ouvert et d’un</a>tag. -
href,classetidsont des attributs de l’élément<a>. - “page.html” est la valeur de l’attribut
href. -
<p>est un parent direct de l’élément<a>. -
<div>est un parent indirect de l’élément<a>.
Un élément HTML peut avoir une ou plusieurs classes (dans l’attribut class, séparées par des espaces). Plusieurs éléments différents peuvent avoir la même classe ou des classes communes.
Un élément HTML peut avoir un identifiant (l’attribut id). Un identifiant est unique, deux éléments ne peuvent pas avoir le même identifiant (dans le champ, cela peut arriver mais c’est une erreur qui peut entraîner des effets de bord). Les identifiants dupliqués seront indiqués dans nos rapports d’analyse détaillés.
Sélecteurs CSS de base
Sélectionner un tag par nom
Pour sélectionner un ou plusieurs éléments par leur tag, utilisez le nom du tag directement comme a, span, div, header.
Sélection par une ou plusieurs classes
Pour sélectionner un ou plusieurs éléments par l’une de leurs classes, utilisez le nom de la classe précédé d’un point “.”.
Exemple :
.myClass
Vous pouvez affiner votre sélection en spécifiant d’autres classes que l’élément doit avoir, toujours préfixées par un “.”, attachées à la classe précédente.
.myClass.secondClass
Sélection par la présence d’un attribut
Pour sélectionner un élément ou des éléments qui ont un certain attribut, vous devez définir l’attribut pertinent entre crochets “[ ]”.
Exemple :
a[download]
Sélectionne tous les liens avec un download attribut.
Sélection par la valeur d'un attribut
Pour sélectionner un élément ou des éléments qui ont un certain attribut, vous devez définir l'attribut pertinent et sa valeur entre crochets “[ ]”.
Exemple :
[data-analytics="GMT324-3"]
Sélection à partir d'une partie de la valeur d'un attribut
Sur certains sites, une partie des attributs est générée automatiquement et peut changer à chaque version. Par exemple :
<p id="clientP-4D92J_keyPId"/>
Si vous devez cibler cet élément avec :
- le début de la valeur, utilisez l'opérateur "^="
Exemple :
[id^="clientP-"]
- la fin de la valeur, utilisez l'opérateur "$="
Exemple :[id$="keyPId"]
-
tout texte contenu dans la valeur, utilisez l'opérateur "*="
Exemple :[id*="ntP-4D92J_k"]
Sélection d'un élément par son identifiant
Pour sélectionner un élément par son identifiant unique, utilisez le nom de l'identifiant précédé d'un dièse “#”.
#myId
Un identifiant est normalement unique, donc ce sélecteur est censé renvoyer un seul élément. Vous ne devez donc pas attacher plusieurs identifiants.
Composition du sélecteur
Vous pouvez composer des modes de sélection simples pour affiner vos sélecteurs. Ainsi, pour sélectionner un élément par son tag et l'une des classes qu'il contient, vous pouvez utiliser :
a.myClasse
L'identifiant étant le sélecteur le plus précis, il est toujours au début de la déclaration et est souvent suffisant à lui seul.
Sélection d'éléments situés dans d'autres éléments
Le sélecteur des parent(s) et enfant(s) est séparé par un espace. Les parent(s) peuvent alors être des parents directs ou indirects.
div a
Tous les <a> éléments qui ont un <div> élément parent.
.parent .child
Tous les éléments avec la child classe qui ont comme parent un élément avec la parent classe.
#parent .child
Tous les éléments avec la child classe qui sont contenus dans le parent, nécessairement unique, avec l'identifiant parent.
#header div span a
Tout lien qui a un <span> parent qui lui-même a un <div>parent, contenu dans un élément parent qui a un header identifiant.
<div id="header">
<div>
<span><strong><a href="#">Lien adressé par le sélecteur</a></strong></span>
</div>
<span><a href="#">Lien non adressé par le sélecteur</a></span>
</div>
Rappel : l'enfant n'est pas nécessairement un enfant direct du parent.
Sélecteurs CSS avancés
Sélection d'un élément enfant direct
#parent > .child
Sélectionnez les éléments avec la classe child qui sont des enfants directs de l'élément avec l'identifiant parent.
Cas d'usage : plusieurs éléments imbriqués - par ex. des menus - mais seul le premier niveau est sélectionné.
Sélection d'un élément adjacent (ou élément frère)
.abel + .cain
Nous sélectionnons les éléments avec la classe cain qui suivent les éléments avec la classe abel.
Cas d'usage : essayer de sélectionner un élément qui est systématiquement après un autre, mais difficile à pointer efficacement par lui-même.
Sélection de l'élément n-ième (d'un parent direct implicite)
Pour sélectionner un élément par sa position dans son parent, vous pouvez utiliser :nth-child() (signifie “élément enfant n-ième”) avec, comme paramètre, la position de l'élément à sélectionner.
Exemple :
a:nth-child(2)
Sélectionne tous les liens qui sont le deuxième enfant de leur parent direct.
Sélection d'un élément avec exclusion
Pour sélectionner un article à condition qu'il ne corresponde pas à un autre sélecteur simple, vous pouvez utiliser :not() avec le sélecteur à exclure comme paramètre.
Exemple :
a:not(.excluded)
Sélectionne tous les liens qui n'ont pas la exclude classe.
Autres sélecteurs
Il existe de nombreux sélecteurs CSS et de nouveaux sont régulièrement ajoutés : nous recommandons