Création de sélecteur CSS

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

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

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 :

  • Il récupère les identifiants des menus, qui sont ici identiques.
  • Il génère le code Javascript permettant de réaliser l’insertion, semblable à celui-ci : 
    #(identifiant_menu).insertBefore(#identifiant_menu)
    Ce qui ne peut pas fonctionner, puisque le menu s’insérerait avant lui même. Afin de contourner ce problème, il suffit de créer un sélecteur CSS permettant à Kameleoon d’identifier de façon unique nos 2 éléments.

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.

Déterminer le sélecteur CSS

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 :
    div, table, h1, h2, h3, section, body, header, li, ul, 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="landingHeader" id="landing_header_6747">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.
  • 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.
  • L’identifiant CSS est landing_header_6747. Pour accéder à cet élément avec un sélecteur, positionnez un # devant l’identifiant.

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.
  • 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 B : 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.
  • 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 ul 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.
  • 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) : 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) sélectionne l’élément span qui est le 5e enfant de son élément parent.
  • A:first-child : 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 Reference 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 les préférences, cochez la case « Afficher le 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é.

Cliquez ensuite sur le bouton « Ajouter un sélecteur personnalisé ».

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

Pour voir le sélecteur CSS utilisé par défaut en bas à gauche de la page, cochez la case « Afficher le panneau de hiérarchie » dans les préférences.

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 :

  • Hierarchie : 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).

Vous avez d’autres questions ? Envoyer une demande
Réalisé par Zendesk