Sélecteur CSS

Sur cette page :

• Mise en route et raccourcis clavier
• Ouverture des outils de développement
• Copier un sélecteur à partir d'une page
• Que sont les sélecteurs ?

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 opérations suivantes :

• Composant commun (Nouveau cas de test > ajouter un 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 une page > Étendue de la zone de page) : lors de la définition d'une zone de page sur 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 l'automatisation et la manipulation Test en cours > Portée de la Zone de Page) : Lors de la définition d'une zone de page "page en cours de test" sur la page de préparation pour l'automatisation et la gestion manuelle des tests Écran de test accessible à partir de la vue d'ensemble de l'exécution du test.

Pour commencer

La localisation et la copie d'un sélecteur impliquent généralement l'utilisation des "outils de développement" fournis avec votre navigateur Web. Ils portent des noms différents selon le type de navigateur et chacun propose des raccourcis clavier pour accéder aux outils et naviguer à l'intérieur de ceux-ci.

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

• Google Chrome - Outils de développement : Raccourcis clavier - Google Chrome 
• Apple Safari - Inspecteur Web : Raccourcis clavier 
• Microsoft Edge - Outils de développement : Raccourcis clavier des outils de développement 
• Microsoft Internet Explorer - Outils de développement F12 : Raccourcis clavier des outils de développement Référence

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, consultez Raccourcis clavier pour développeurs Mozilla .

Vous pouvez ouvrir l'inspecteur (l'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 menus de Firefox, sélectionnez Outils > Développeur Web > Inspecteur (Ctrl+Maj+C).
• Avec un élément sélectionné : Cliquez avec le bouton droit sur un élément d'une page Web et sélectionnez Inspecter l'élément [(Q)]{.kbd}.

Copier un sélecteur à partir d'une page

1. Cliquez avec le bouton droit de la souris sur la région souhaitée de la page de test, puis sélectionnez

Inspecter l'élément dans le menu pour lancer l'inspecteur afin que vous puissiez ensuite sélectionner un élément sur la page (ou utiliser le raccourci clavier Ctrl+Maj+I).

![Clic droit sur la page testée, puis sélection d'Inspecter l'élément dans le menu](../../../images/right-click-inspect-element.png)

2. Copiez le sélecteur CSS que vous souhaitez cibler. Par exemple, lorsque vous utilisez les outils de développement Firefox, vous pouvez cliquer avec le bouton droit de la souris > Copier le sélecteur unique 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 d'attribut id pour la valeur "main", vous devez spécifier #main comme sélecteur).

   

Information - Référence de formatage du sélecteur avec exemple : Pour des détails complets sur les sélecteurs CSS correctement formatés et une référence complète des éléments, consultez la documentation CSS des développeurs Mozilla{.external} ou la Recommandation du niveau 3 du W3C sur les sélecteurs.{.external}.

• Sélecteur : #id - Le sélecteur #id stylise l'élément avec l'id spécifié.

• Exemple : #main - L'id spécifié est main.

• Exemple de référence : Sélectionne l'élément avec id="main".

  

3. Collez le sélecteur que vous avez copié depuis le presse-papiers virtuel dans le champ Sélecteur.

   Lorsque vous accédez aux problèmes détecté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. Cliquez droit, ouvrez les outils de développement, dans l'onglet Éléments, recherchez le sélecteur CSS pour cibler le clic sur un élément>copier>xpath ou l'élément>copier>xpath complet renvoient toujours cette erreur. ' Une erreur inconnue s'est produite. Si ce cas de test contient des composants ou des zones de page, assurez-vous que tous les sélecteurs sont valides. Solution de contournement : Trouvez l'ID pour le sélecteur CSS et Copiez>Copier le sélecteur

Que sont les sélecteurs ? {#aperçu}

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 plus technique : Les sélecteurs sont des modèles qui correspondent aux éléments d'une structure arborescente 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 en parole, et utilise des sélecteurs pour lier le style. Propriétés aux éléments dans les documents HTML.

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

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

Structure : un sélecteur représente une structure qui peut être utilisée comme condition (comme dans une règle CSS) qui détermine à quels éléments un sélecteur correspond dans une arborescence de documents, 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'arborescence du document pour tout espace de noms, entrez :

  *[hreflang|=en]

• Type : un préfixe de composant d'espace de noms facultatif ajouté au début d'un nom d'élément (|) Par exemple, pour représenter un élément de titre 2 dans l'arborescence du document, entrez simplement :

  h2 [Insert Heading Text Here]

• 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, saisissez :

  h3[titre]

• Classe : Point ou notation "point final" pour représenter l'attribut de classe pour l'espace de noms respectif (.) Par exemple, pour attribuer des informations de style de couleur verte à tous les éléments avec class="example", saisissez :

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

• ID : les attributs déclarés comme étant 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 », 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 des liens portant la classe external et déjà visités, entrez :

  a.external:visited

• Pseudo-éléments : Deux deux-points suivis du nom d'un pseudo-élément permettent d'accéder au contenu au-delà de l'arborescence du 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, saisissez :

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

• Combinateurs : permettent de spécifier un chemin hiérarchique pour afficher l'ascendance telle que les é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>Ce <span class="myclass"> en-tête est <em>very>/em> important</span></h1>

Syntaxe : La grammaire de base des sélecteurs comprend les éléments suivants : ""

• * : 0 ou plus (Remarque : étant donné que cela peut être omis lorsque c'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, reportez-vous à World Wide Web Consortium (W3C) - Sélecteurs Niveau 3 : https://drafts.csswg.org/selectors-3/

Sujets connexes :

• Ajout de composants communs
• Ajout d'une page à un cas de test