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 existe 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 un Composant): Lors de la définition d'un composant commun dans 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 une Page > Portée de la Zone de Page): Lors de la définition d'une Zone de Page dans le panneau Ajouter des Pages lors de la création d'un nouveau Cas de Test.
  • Composant de Zone de Page (Préparer la Page pour Tests Automatisés et Manuels > Portée de la Zone de Page): Lors de la définition d'une Zone de Page de la "page en cours de test" sur l'écran Préparer la Page pour Tests Automatisés et Manuels accessible depuis l'aperçu de la course de test.

Premiers Pas

Localiser et copier un sélecteur implique généralement d'utiliser les « outils de développeur » intégrés à votre navigateur web. Ceux-ci portent des noms différents selon le type de navigateur et proposent chacun des 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 substituée à [Ctrl] sur un appareil OSX ou iOS.

Ouverture des Outils de Développeur (Exemple Firefox)

L'exemple qui suit illustre l'utilisation des Outils de Développeur de Mozilla Firefox. Pour plus d'informations sur l'utilisation des raccourcis clavier avec les Outils de Développeur Firefox, voir Raccourcis Clavier Développeur Mozilla.

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

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

Copier un sélecteur depuis une page

  1. Right-click sur la région souhaitée de la page de test, puis sélectionnez Inspect Element depuis le menu pour lancer l'Inspecteur afin de pouvoir ensuite sélectionner un élément sur la page (ou utiliser 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, lorsque vous utilisez les Outils de Développement de 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 d'élément complète correctement formatée (par exemple, pour tester l'élément id pour la valeur 'main', vous spécifiez #main comme 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 d'élément, voir la documentation Mozilla Developer Web sur les Sélecteurs CSS ou Recommandation W3C Selectors Level 3.

    • Selector: #id → Le sélecteur #id applique un style à l'élément avec l'id spécifié.
    • Example: #main → L'id 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 trouvés pour le composant ou la zone de page ciblée, vous verrez inclus ceux liés au sélecteur CSS spécifique que vous avez entré.
  4. Bug connu : Lors de l'utilisation du Sélecteur CSS dans le navigateur Chrome. Inspecter à droite, ouvrir les outils de développement, sur l'onglet éléments, trouver le sélecteur CSS pour cibler par clic et élément>copier>xpath ou élément>copier>Xpath complet retourne toujours cette erreur,\ 'Une erreur inconnue est survenue. Si ce cas de test contient des composants ou des zones de page, veuillez vous assurer que tous les sélecteurs sont valides.'
    Workaround: Trouvez l'ID pour le Sélecteur CSS et utilisez Copy > Copy Selector.

Que 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 un peu plus longue et technique**: Les sélecteurs sont des motifs qui correspondent aux éléments dans une structure d'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 Cascading Style Sheet (CSS3) décrit le rendu des documents HTML à l'écran ou à l'oral, et utilise des sélecteurs pour lier les propriétés de style aux éléments dans les documents HTML.

**Utilisation**: En évaluant l'expression sur tous les éléments dans un sous-arbre, les sélecteurs peuvent être utilisés pour :

  • Sélectionner un ensemble d'éléments
  • Sélectionner un élément unique parmi un ensemble d'éléments

**Structure**: Un sélecteur représente une structure qui peut être utilisée comme une 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 succincte du fragment HTML ou XML correspondant à cette structure.

Types: Les types de sélecteurs incluent :

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

    *[hreflang|=en]

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

    h2

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

    h3[title]

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

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

  • ID: Les attributs déclarés comme 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ù n'importe quel élément dont la valeur d'attribut de type ID est "12345", entrez :

    #12345

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

    a.external:visited

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

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

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

  • Combinateurs: Permettent la spécification d'un chemin hiérarchique pour montrer des relations comme les éléments enfants ou frères et sœurs ( ) ou (+)

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

    h1 em.

    C'est une description correcte et valide, mais partielle, du fragment suivant :

    <h1>Ce <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 lorsqu'il est implicite, il n'est pas souvent utilisé.)
  • +: 1 ou plus
  • ?: 0 ou 1
  • |: sépare les alternatives
  • [ ]: regroupement

Référence Complète: Pour plus d'informations, consultez le World Wide Web Consortium (W3C) - Selectors Level 3 : https://drafts.csswg.org/selectors-3/

Sujets connexes :

Is this page helpful?

Help us improve this page

Still need help?