Sélecteur CSS

This page is not available in the language you requested. You have been redirected to the English version of the page.
Link to this page copied to clipboard
Not for use with personal data

Sur cette page :

Il y a plusieurs zones de l'application axe Auditor qui fournissent un champ Sélecteur. Suivez ce processus lorsque vous souhaitez spécifier un sélecteur CSS particulier à tester dans le cadre des éléments suivants :

  • Composant Commun (Nouveau Cas de Test > Ajouter Composant) : Lors de la définition d'un composant commun sur le panneau Composants Communs lors de la création d'un nouveau Cas de Test.
  • Composant de Zone de Page (Nouveau Cas de Test > Ajouter Page > Portée de la Zone de Page) : Lors de la définition d'une Zone de Page sur le panneau Ajouter Pages lors de la création d'un nouveau Cas de Test.
  • Composant de Zone de Page (Préparer la Page pour Test Automatisé et Manuel > Portée de la Zone de Page) : Lors de la définition d'une Zone de Page de la « page testée » sur l'écran Préparer la Page pour Test Automatisé et Manuel accessible depuis la Vue d'ensemble du Test.

Prise en main

Localiser et copier un sélecteur implique généralement l'utilisation des « outils de développement » fournis avec votre navigateur web. Ceux-ci ont des noms différents selon le type de navigateur, et chacun propose raccourcis clavier pour accéder aux outils et naviguer à l'intérieur.

Référence des raccourcis clavier par type de navigateur

Sur un Mac : En général, la touche Cmd (⌘) peut être remplacée par [Ctrl] sur un appareil OSX ou iOS.

Ouverture des outils de développement (Exemple Firefox)

L'exemple qui suit illustre l'utilisation des outils de développement de Mozilla Firefox. Pour plus d'informations sur l'utilisation des raccourcis clavier avec les outils de développement Firefox, voir Raccourcis clavier pour développeurs Mozilla.

Vous pouvez ouvrir l'Inspecteur (un des Outils de développement qui les lance tous) de l'une des manières suivantes :

  • Sans élément sélectionné : Choisissez l'option Inspecteur dans le menu Développeur (Ctrl+Maj+I), ou dans la barre de menu de Firefox, sélectionnez Outils > Développeur Web > Inspecteur (Ctrl+Maj+C).
  • Avec un élément sélectionné* : Clique-droit un élément sur une page web et sélectionnez Inspecter l'élément [(Q)]{.kbd}.

Copier un sélecteur à partir d'une page

  1. Right-click sur la région souhaitée de la page de test, puis sélectionnez Inspect Element dans le menu pour lancer l'Inspecteur afin de pouvoir ensuite sélectionner un élément sur la page (ou utilisez le raccourci clavier Ctrl+Maj+I).
    Context menu showing Inspect Element option after right-clicking on the page under test
  2. Copiez le sélecteur CSS que vous souhaitez cibler. Par exemple, lors de l'utilisation des outils de développement Firefox, vous pouvez right-click > Copy Unique Selector pour l'élément actuellement sélectionné dans l'outil Inspecteur. Assurez-vous de coller la référence complète de l'élément correctement formatée (par exemple, pour tester l'élément id d'attribut pour la valeur 'main', vous spécifieriez #main comme le sélecteur).
    Firefox Developer Tools context menu showing Copy Unique Selector option

    Information - Selector Formatting Reference with Example:
    Pour des détails complets sur les sélecteurs CSS correctement formatés et la référence complète de l'élément, voir la documentation du sélecteur CSS de Mozilla Developer Web ou la recommandation W3C Selectors Level 3.

    • Selector: #id → Le #id sélecteur applique des styles à l'élément avec l'identifiant spécifié.
    • Example: #main → L'identifiant spécifié est main.
    • Example Reference: Sélectionne l'élément avec id="main".
    DevTools Inspect Element showing CSS selector for an element with id=main
  3. Collez le sélecteur que vous avez copié depuis le presse-papiers virtuel dans le Selector champ.
    Lorsque vous accédez aux problèmes résultants pour le composant ou la zone de la page ciblée, vous verrez ceux liés au sélecteur CSS spécifique que vous avez saisi.
  4. Bug connu : Lors de l'utilisation du sélecteur CSS dans le navigateur Chrome. Inspectez à droite, ouvrez les outils de développement, sur l'onglet des éléments, trouvez le sélecteur CSS à cibler, cliquez, et élément>copier>XPath ou élément>copier>Xpath complet renvoient toujours cette erreur, 'Une erreur inconnue s'est produite. Si ce test contient des composants ou des zones de page, assurez-vous que tous les sélecteurs sont valides'
    Workaround: Trouvez l'ID pour le sélecteur CSS et utilisez Copy > Copy Selector.

Quels sont les sélecteurs ?

Réponse rapide : Ce sont des chaînes de texte qui peuvent être utilisées pour identifier un élément ou un groupe d’éléments sur une page Web.

Réponse légèrement plus longue et technique : Les sélecteurs sont des motifs qui correspondent à des éléments dans une structure en arbre et peuvent être utilisés pour tester des fragments spécifiques ou sélectionner des nœuds dans des documents HTML ou XML. Le langage Feuille de Style en Cascade (CSS3) décrit le rendu des documents HTML à l'écran ou à la parole et utilise des sélecteurs pour associer des propriétés de style aux éléments dans les documents HTML.

Utilisation : En évaluant l'expression à travers tous les éléments d'un sous-arbre, les sélecteurs peuvent être utilisés pour :

  • Sélectionner un ensemble d'éléments
  • Sélectionner un seul élément à partir d'un ensemble d'éléments

Structure : Un sélecteur représente une structure pouvant être utilisée comme condition (comme dans une règle CSS) qui détermine quels éléments un sélecteur correspond dans un arbre de document, ou comme une description plate du fragment HTML ou XML correspondant à cette structure.

Types : Les types de sélecteurs incluent :

  • Universel : Le nom qualifié de tout type d'élément (*) Par exemple, pour spécifier le nom qualifié de tout élément de langue anglaise dans l'arbre de document pour tout espace de noms, saisissez :

    *[hreflang|=en]

  • Type : Un préfixe de composant d'espace de noms optionnel ajouté devant un nom d'élément (|) Par exemple, pour représenter un élément de titre 2 dans l'arbre de document, saisissez simplement :

    h2

  • Attribut : Représente un attribut d'un élément ([]) Par exemple, pour représenter un élément h3 qui possède l'attribut title, quelle que soit sa valeur, saisissez :

    h3[title]

  • Classe : Notation par point ou « point final » pour représenter l'attribut de classe pour l'espace de noms respectif (.) Par exemple, pour assigner une information de style de couleur verte à tous les éléments avec class="example", saisissez :

    .example { color: green } / tous les éléments avec class=example */

  • ID : Les attributs déclarés de type ID identifient de manière unique un élément avec un signe dièse (#) Par exemple, pour représenter un sélecteur d'ID où tout élément dont la valeur d'attribut de type ID est "12345", saisissez :

    #12345

  • Pseudo-classes : Sélection d'informations en dehors de l'arborescence de document qui ne peuvent pas être exprimées avec des sélecteurs simples (:) Par exemple, pour spécifier un sélecteur qui représente des liens portant la classe external et déjà visités, entrez :

    a.external:visited

  • Pseudo-éléments : Deux double-points suivis du nom d'un pseudo-élément permettent d'accéder à du contenu au-delà de l'arborescence de document actuelle, et un seul par sélecteur est autorisé (::)

    Par exemple, pour transformer en majuscules les lettres de la première ligne de chaque élément p, entrez :

    p::first-line { text-transform: uppercase }

  • Combinateurs : Permettent la spécification d'un chemin hiérarchique pour montrer l'ascendance, comme des éléments enfants ou frères ( ) ou (+)

    Par exemple, pour cibler les éléments em qui sont des descendants des éléments h1, entrez :

    h1 em.

    Il s'agit d'une description correcte et valide, mais partielle, du fragment suivant :

    <h1>Ceci est un <span class="myclass"> titre est <em>très>/em> important</span></h1>

Syntaxe : La « grammaire » de base des sélecteurs inclut les éléments suivants :

  • * : 0 ou plus (Remarque : comme cela peut être omis quand il est implicite, il n'est pas utilisé souvent.)
  • + : 1 ou plus
  • ? : 0 ou 1
  • | : sépare les alternatives
  • [ ] : regroupement

Référence complète : Pour plus d'informations, référez-vous au World Wide Web Consortium (W3C) - Selectors Level 3 : https://drafts.csswg.org/selectors-3/

Is this page helpful?

Help us improve this page

Still need help?