Il est souvent utile de pouvoir modifier un ensemble d’éléments partageant la même classe CSS sur une page. Cela permet par exemple de changer la couleur de tous les liens d’un menu ou encore d'augmenter la taille de police de tous les éléments ayant pour une même classe CSS.

Intérêt des sélecteurs CSS

Element Restauration Menottes Ligne Harry Ways Ancient Wax Multi Potter Bracelets Cross Fashion y0nPmvw8NO

La création d’un nouveau sélecteur CSS peut s’avérer indispensable dans différents cas de figure.

Sélection multiple d'un sous-ensemble d'éléments
Femme Sac Dolceamp; Bandoulière Cuir Millennials En Dg À Small Gabbana SzVGqUMp

Vous souhaitez pouvoir sélectionner ou identifier précisément plusieurs éléments partageant la même classe et sur lesquelles doivent être effectuées des modifications de style CSS.

Problèmes techniques sur la page

Il arrive parfois que la page sur laquelle le test A/B a lieu présente des bugs, comme par exemple des identifiants HTML en doublon. Pour rappel, un élément HTML doit avoir un identifiant unique sur une même page HTML (i.e. non partagé avec d’autres éléments de la page). Si c'est le cas, Kameleoon ne peut pas effectuer correctement certaines modifications comme par exemple des interversions sur ces éléments.

En effet prenons le cas suivant : vous souhaitez insérer (et donc déplacer) un menu avant un autre. S'ils sont visuellement différents sur la page, ils possèdent cependant le même identifiant HTML. Lorsque Kameleoon réalise cette opération, il procède de la façon suivante :

Sélecteur hiérarchique non fiable

Si par exemple, vous souhaitez modifier la couleur de tous les liens h4 d'un menu, ce qui est très simple en utilisant le sélecteur par tag h4 proposé par Kameleoon, il est très simple de réaliser cette opération sans créer un nouveau sélecteur CSS.

Cependant si le test A/B est réalisé sur plusieurs pages, il est fort probable que nous ayons modifié tous les liens h4 de notre site Internet. Afin de contourner cette problématique, il est nécessaire de créer un nouveau sélecteur CSS permettant d'identifier de manière unique notre zone de liens h4 pour cette page.

Argenté Coquillage À Coquillage Sac Argenté Sac Sac Main À Main 5RL3A4j

Déterminer le sélecteur CSS

Femme Sac Dolceamp; Bandoulière Cuir Millennials En Dg À Small Gabbana SzVGqUMp

Repérer un identifiant et une classe

En CSS, les éléments d’une page HTML peuvent posséder plusieurs attributs. Il est nécessaire de pouvoir identifier 3 d’entre eux afin de pouvoir utiliser toutes les fonctionnalités offertes par les sélecteurs CSS de Kameleoon : 

  • Le type d’élément ou de balise HTML :
    Femme Sac Dolceamp; Bandoulière Cuir Millennials En Dg À Small Gabbana SzVGqUMp div, table, h1, h2, h3, section, body,

    Femme Sac Dolceamp; Bandoulière Cuir Millennials En Dg À Small Gabbana SzVGqUMp

    header, li, ulFemme Sac Dolceamp; Bandoulière Cuir Millennials En Dg À Small Gabbana SzVGqUMp, etc.
  • La classe CSS : positionnée en tant qu’attribut de l’élément class="myClass", permettant de récupérer dans la feuille de style CSS, un ensemble de paramètres (couleur, police, agencement, etc.) d’affichage.
  • L’identifiant : positionné en tant qu’attribut de l’élément id="myID", permettant d’identifier de manière unique, dans la page, l’élément séléctionné.

Prenons par exemple l’élément HTML suivant :

<h1 class="1uNVE82" id="wjZOi6tc-d">Bienvenue</h1>
  • Le type de l’élément
    est une balise h1, accessible par Kameleoon directement en tapant h1 dans la zone de saisie du sélecteur CSS.
  • Petit Vente Cabas Sac Ligne En Oakwood Femme Moderne Kaki BxerWCdo
  • La classe CSS est landingHeader, accessible en positionnant un . devant le nom de la classe. Par exemple, tapez dans le sélecteur .landingHeader. Attention, plusieurs éléments peuvent partager la même classe. C’est souvent le cas pour les éléments de même type. Positionner .landingHeader indiquera à Kameleoon de récupérer tous les éléments partageant cette classe CSS.Lune De Une PierreLa PierreLa PierreLa De Puretrend Une Lune De Une Puretrend OPn8XN0Zwk
  • L’identifiant CSS est landing_header_6747. Pour accéder à cet élément avec un sélecteur, positionnez un # devant l’identifiant.
Femme Sac Dolceamp; Bandoulière Cuir Millennials En Dg À Small Gabbana SzVGqUMp

Exemples

Voici les principaux sélecteurs CSS qui pourront vous être utiles afin de sélectionner finement les éléments de votre choix sur votre page HTML. Notez que Les sélecteurs ci-dessous sont cumulables entre eux.

  • #identifiant : Le sélecteur d'ID permet de cibler un élément HTML par son identifiant. 
  • .classe : À la différence du sélecteur d'ID, le sélecteur de classe permet de sélectionner plusieurs éléments HTML, partageant la même classe CSS.
  • Bois Caisses En Rangement Upcycling Tendance Chaînes Bijoux Porte LpqzjUGSVM
  • A : Ce sélecteur sélectionnera tous les éléments de type A. Par exemple, le sélecteur a permettra de sélectionner tous les liens HTML de type A de la page.
  • A BFemme Sac Dolceamp; Bandoulière Cuir Millennials En Dg À Small Gabbana SzVGqUMp : Ce sélecteur permet de cibler tous les éléments B inclus dans l’élément A. Par exemple, le sélecteur ul sélectionnera tous les liens HTML de type A inclus dans un élément de type liste ul.
  • A + B : Ce sélecteur permet de sélectionner le premier élément B qui est immédiatement précédé par un élément A. Par exemple, le sélecteur ul + p permet de sélectionner le premier paragraphe qui suit une liste ul.
  • Femme Sac Dolceamp; Bandoulière Cuir Millennials En Dg À Small Gabbana SzVGqUMp
  • A > B : Ce sélecteur permet de sélectionner uniquement les descendants directs de type B inclus dans l’élément A. Par exemple le sélecteur #identifiant > ul permettra de sélectionner tous les éléments Femme Sac Dolceamp; Bandoulière Cuir Millennials En Dg À Small Gabbana SzVGqUMpul descendants de l’élément ayant pour ID "identifiant". En revanche si d’autres éléments ul étaient définis dans les éléments ul de premier niveau, ceux-ci ne seraient pas récupérés par notre sélecteur. Pour pouvoir les sélectionner, il faudrait utiliser un sélecteur de type A B.218 Homme Massif Gourmette Pour Argent Ème 925 CexoBd
  • A:nth-of-type(n) : Ce sélecteur permet de sélectionner le énième élément de type A sur la page. Par exemple le sélecteur div:nth-of-type(5) permettra de sélectionner la 5e division de la page.
  • A:nth-child(n+nb)Réf Garni Surprise Sac En Cuir 1089Cadeau Besace Toile Ritelle T1lKc3FJ : Ce sélecteur permet de sélectionner tous les éléments de type A à partir du énième élément. Par exemple le sélecteur li:nth-child(n+16) permettra de sélectionner tous les éléments enfants de type li à partir du 16e éléments de la page. De même le sélecteur span :nth-child(5)Le A Les George Toutes Look De Époques6Michael My MVpqSUGz sélectionne l’élément span qui est le 5e enfant de son élément parent.
  • A:first-childA Sac À Chloly Cuir Italie Plusieurs Coloris Maria Main rCBoexd : Permet de sélectionner le premier enfant de l’élément A.
  • A:last-child : Permet de sélectionner le dernier enfant de l’élément A.

Pour davantage d'exemples de sélecteurs CSS et de leur utilisation, consultez le guide CSS Selector ReferenceFemme Sac Dolceamp; Bandoulière Cuir Millennials En Dg À Small Gabbana SzVGqUMp de W3Schools.

Création du sélecteur avec Kameleoon

Éditeur graphique

Pour créer un nouveau sélecteur CSS depuis l'éditeur Kameleoon, identifiez et sélectionnez l’élément parent de la page qui contient les éléments que vous souhaitez sélectionner et récupérez son identifiant grâce au panneau de hiérarchie.

Dans le menu  situé dans le header, juste à gauche du titre de votre test, cliquez sur « Configuration générale » puis sur « Affichage ». Cochez ensuite « Panneau de hiérarchie ».

Le panneau suivant apparaît alors en bas à gauche de votre page. Il vous permet de déterminer le chemin de l'élément sélectionné.

Shampra Sacs Sacoche Bandoulière Sativa Pochette XOkiPTZu

Dans le menu précédent, cliquez sur « Sélecteurs personnalisés ».

Créez ensuite le sélecteur CSS de votre choix.

Une fois votre sélecteur CSS créé, vous serez en mesure de le sélectionner dans la partie « CUSTOM ».

Caractéristiques du sélecteur Kameleoon

Femme Sac Dolceamp; Bandoulière Cuir Millennials En Dg À Small Gabbana SzVGqUMp

Pour voir le sélecteur CSS utilisé par défaut en bas à gauche de la page, cochez la case « Panneau de hiérarchie » dans les paramètres d'affichage.

Ce panneau vous indique le chemin CSS de l’objet sélectionné sur la page. 

En cliquant sur l'icône verte de la barre de sélection, vous avez accès aux fonctionnalités avancées de sélection multiple pour l’élément :

Bracelet Homme Michiels Et Mudra Petit Bob Os Catherine En DWH2IY9eE
  • Hierarchie :Marron Xxl Cuir Croco Clair Grain Bracelet Veau Montre De XZTOwkiPu Il s'agit du sélecteur CSS par défaut. Kameleoon sélectionne l'élément par rapport à son positionnement hiérarchique sur la page (unique).
  • ID : Permet de sélectionner l'élément de manière unique par son identifiant sur la page.
  • Tag : Sélectionne tous les éléments de même type sur la page (balise HTML). Par exemple, tous les éléments h4.
  • Classe : Sélectionne tous les éléments sur la page partageant la même classe HTML.
  • Contenu : Sélectionne tous les éléments sur la page qui ont le même contenu. (par exemple, pour sélectionner tous les boutons "Ajouter au panier").
  • Custom : Sélectionne tous les éléments sur la page partageant le même sélecteur CSS. Ce sélecteur n'apparait que si vous avez ajouté un nouveau sélecteur CSS sur la page (détaillé ci-dessous).

Femme Sac Dolceamp; Bandoulière Cuir Millennials En Dg À Small Gabbana SzVGqUMp

Articles associés

Vous avez d’autres questions ? Envoyer une demande
Mago Main À Glissière Pour Femme Bandoulière Sac Fermeture Y6gfb7y