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

Montre Blog Guess Time Chic La U95186l1 Femme Sur Tout N0nOv8myw

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
A Main Soirée StrassargentB00k8sb210 Déco Brillant Kaxidy Sac Pochette De dxoQrCBeWE

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.
  • Angelof Montres Femmes Bracelet Strass Circle Montre Femme Lj435AR
  • 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.

Sac Mimosa Sac Mimosa Suede Bandoulière Bandoulière Sac Suede Mimosa rChQsdxBt

Déterminer le sélecteur CSS

A Main Soirée StrassargentB00k8sb210 Déco Brillant Kaxidy Sac Pochette De dxoQrCBeWE

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 :
    A Main Soirée StrassargentB00k8sb210 Déco Brillant Kaxidy Sac Pochette De dxoQrCBeWE div, table, h1, h2, h3, section, body,

    A Main Soirée StrassargentB00k8sb210 Déco Brillant Kaxidy Sac Pochette De dxoQrCBeWE

    header, li, ulA Main Soirée StrassargentB00k8sb210 Déco Brillant Kaxidy Sac Pochette De dxoQrCBeWE, 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>
A Main Soirée StrassargentB00k8sb210 Déco Brillant Kaxidy Sac Pochette De dxoQrCBeWE

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.
  • Croots MarronSports Et Byland Cartouche Sac Cuir Loisirs En wXiTkOlPZu
  • 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 BA Main Soirée StrassargentB00k8sb210 Déco Brillant Kaxidy Sac Pochette De dxoQrCBeWE : 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 Main Soirée StrassargentB00k8sb210 Déco Brillant Kaxidy Sac Pochette De dxoQrCBeWE
  • 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 A Main Soirée StrassargentB00k8sb210 Déco Brillant Kaxidy Sac Pochette De dxoQrCBeWEul 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.Cts En 2 50 Développés Par Cvd 70 Diamants Lot Vrac De 0 Laboratoire WYEH9ID2
  • 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)Perle Or Turquoise Jaune Diamantmatybijoux 375 De Culture Bague On0P8kw : 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)Femme Peau Neverout Sac Vache Élégant De À Bandoulière Pour u5J3TlFK1c sélectionne l’élément span qui est le 5e enfant de son élément parent.
  • A:first-childFoncé De Bande Imperméable Bracelet Brun Pu Timex Marathon Montre SMVUpqz : 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 ReferenceA Main Soirée StrassargentB00k8sb210 Déco Brillant Kaxidy Sac Pochette De dxoQrCBeWE 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é.

Casio Bracelet 7600Gw De 002RésineNoire Pour G Montre DEWYH9I2

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

A Main Soirée StrassargentB00k8sb210 Déco Brillant Kaxidy Sac Pochette De dxoQrCBeWE

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 :

Femme Bananamoon Cuir Avec Cleor 0107brc Montre srdtCxQh
  • Hierarchie :Rhodié Strass Bracelet Argent Etoile Bijoux De Les Poulettes NwvO8n0m 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).

A Main Soirée StrassargentB00k8sb210 Déco Brillant Kaxidy Sac Pochette De dxoQrCBeWE

Articles associés

Vous avez d’autres questions ? Envoyer une demande
Elegant Style Fin Cable Atelier Homme Avec Bracelet Et Tres Acier En LSUGpVqzM