Sélecteurs d’éléments utilisés dans le compositeur d’expérience visuelle

Last update: Sat Jul 20 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Rubriques :

Un sélecteur d’éléments est une expression CSS qui peut identifier un ou plusieurs éléments.

Vous pouvez trouver des informations de base à propos des sélecteurs CSS dans le document Selectors (Sélecteurs) du MDN (Mozilla Developer Network, réseau de développeurs Mozilla).

Vous pouvez définir si vous utilisez l’élément classé ou les ID d’élément dans vos préférences de compte. Cliquez sur Administration > Visual Experience Composer, puis sélectionnez vos sélecteurs CSS préférés.

image css_selectors

NOTE

Les classes d’éléments sont disponibles en tant que sélecteurs dans les activités de test A/B, de personnalisation automatisée, de ciblage d’expérience et de test multivarié.

Pour plus d’informations sur quand utiliser des sélecteurs CSS et quand utiliser des identifiants uniques, consultez les Bonnes pratiques et limites du compositeur d’expérience visuelle.

Comment l’Adobe Target génère un sélecteur pour un élément section_D89D954BCBFB486CA081BE183776A475

Target utilise un algorithme simple pour créer un sélecteur. Vous trouverez ci-dessous une brève explication de la logique de génération :

Si un élément comporte un identifiant, par exemple id="container", alors le sélecteur pour l’élément est #container.

Par exemple :

code language-html

code language-html
`<div class="wrapper"> <div id="container"> <!-- Selector is computed for this element --> <ul class="navigation"> <li class="item active"> Home </li> <li class="item"> Men </li> <li class="item"> Women </li> <li class="item"> Kids </li> </ul> </div> </div>`

<div class="wrapper">
  <div id="container"> <!-- Selector is computed for this element -->
    <ul class="navigation">
      <li class="item active"> Home </li>
      <li class="item"> Men </li>
      <li class="item"> Women </li>
      <li class="item"> Kids </li>
    </ul>
  </div>
</div>

Si un élément comporte un attribut de classe, Target tente d’exploiter la première classe de n’importe quelle classe présente sur l’élément.

Target tente d’analyser l’élément parent jusqu’à ce qu’il trouve l’élément <HTML> ou un élément avec un identifiant. Chaque fois qu’un élément comporte un id et que le sélecteur est calculé sur son enfant descendant, l’id de cet élément contribue au sélecteur.

Par exemple :

code language-html

code language-html
`<div class="wrapper"> <div id="container"> <!-- id is present here. It contributes to selector --> <ul class="navigation"> <li class="item active"> Home </li> <!-- Selector is computed for this element --> <li class="item"> Men </li> <li class="item"> Women </li> <li class="item"> Kids </li> </ul> </div> </div>`

<div class="wrapper">
  <div id="container"> <!-- id is present here. It contributes to selector -->
    <ul class="navigation">
      <li class="item active"> Home </li> <!-- Selector is computed for this element -->
      <li class="item"> Men </li>
      <li class="item"> Women </li>
      <li class="item"> Kids </li>
    </ul>
  </div>
</div>

Dans cet exemple :

Sélecteur : #container > ul.navigation:eq(0) > li.item:eq(0) (« > » indique l’enfant immédiat.)

eq indique à l’index qu’il y a un élément qui comporte "tagName=UL" et que la première classe est navigation. Par conséquent, index est égal à 0. Pour plus d’informations, voir l’article Selectors (Sélecteurs) dans MDN.

Si un élément ne comporte pas de classe, Target utilise tagName comme élément et examine l’élément parent jusqu’à ce que l’élément <HTML> ou un élément avec identifiant soit trouvé.

Par exemple :

code language-html

code language-html
`<div class="wrapper"> <div id="container"> <!-- id is present here. It contributes to selector --> <ul class="navigation"> <li> Home </li> <li> Men </li> <li class="active"> Women </li> <li> Kids </li><!-- Selector is computed for this element --> </ul> </div> </div>`

<div class="wrapper">
  <div id="container"> <!-- id is present here. It contributes to selector -->
    <ul class="navigation">
      <li> Home </li>
      <li> Men </li>
      <li class="active"> Women </li>
      <li> Kids </li><!-- Selector is computed for this element -->
    </ul>
  </div>
</div>

Sélecteur : #container > ul.navigation(0) > li:nth-of-type(4).

Vous pouvez en savoir plus sur nth-of-type sur la page web des astuces CSS.

Dans le processus ci-dessus :

Vous pouvez utiliser n’importe quel sélecteur CSS tant qu’il identifie de manière unique un élément dans le DOM.
L’approche ci-dessus est celle utilisée par Target. Target ne rend pas obligatoire l’utilisation de cette approche. Vous pouvez ajouter n’importe quel sélecteur tant que le point n° 1 est vrai.
Vous pouvez utiliser n’importe quel attribut dans le sélecteur. Ce document n’utilise le nom de classe que comme exemple.

recommendation-more-help

3d9ad939-5908-4b30-aac1-a4ad253cd654