It is useful to be able to change a group of elements sharing the same CSS class. This way you can, for instance, change the color of all the links in a menu or increase the font size of all the elements with the same CSS class.
Interest of CSS selectors
Creating a new CSS selector can be essential in some cases.
Multiple selection of a subset of elements
If you want to be able to select or identify clearly several elements with the same class, on which you want to make some changes on the CSS style.
Technical issues on the page
It can sometimes occur that the page on which the A/B test is running has bugs, such as twice the same HTML ID. As a reminder, an HTML element has to have a unique id on an HTML page (ie: not shared with other elements on the page). If this was the case, Kameleoon would not be able to do some changes, such as switching elements.
Indeed, if, for example, you want to insert (and move) a menu before another, visually differents but with the same HTML id. Here is what Kameleoon is doing:
Getting the ID of the menus – here identical.
It cannot work because the menu would insert itself. To get around this problem, you simply have to create a CSS selector allowing Kameleoon to identify our two menus as unique elements.
Hierachical selector not reliable enough
To change the color of all the
h4 links of a menu, such as the one we took as an example, it is very simple to make this change without using a CSS selector thanks to the "Selection" tool.
However, if the A/B test runs on several pages, it will probably change all
h4 links on your website. To get around this problem, you have to create a new CSS selector allowing you to identify clearly the area of
h4 links to change.
Creating a CSS selector
Detecting an ID and a CSS class
With CSS, the elements of an HTML page can have several attributes. It is necessary to be able to identify 3 of them to use all functionalities of Kameleoon CSS selectors:
- Which kind of element or HTML tag:
- The CSS class, as an attribute of the element
class="myClass", allowing you to find in the CSS style sheet some parameters (color, font, layout, etc).
- The ID, as an attribute of the element
id="myID", allowing to identify a unique element.
Let's take the following example:
<h1 class="landingHeader" id="landing_header_6747">Bienvenue</h1>
- Kind of element:
h1tag; you can reach it directly by writing
h1in the text field of the CSS selector.
- CSS class:
landingHeader; you can reach it by putting a
.in front of the name of the class. For example, write
.landingHeaderin the selector.
Be careful, several elements can share the same class. It is often the case with similar elements. Writing
.landingHeaderwill tell Kameleoon to get all the elements sharing this CSS class.
- CSS ID:
landing_header_6747; to find this element with a selector, put a
#in front of the ID.
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= ID selector; allows you to target an HTML element with its ID.
.classe= Class selector; unlike the ID selector it will allow you to select several HTML elements, sharing the same CSS class.
A= This selector will select all the type
Aelements. For example, the selector will select all HTML links of
A B= This selector allows you to target all
Belements included in
Aelements. For example,
ul Awill select all
AHTML links included in a
A + B= This selector allows you to select the first
Belement located immediately after an
Aelement. For example
ul + pwill select the first paragraph after a
A > B= This selector will select only
Belements descendant of
Aelements. For example,
#identifiant > ulwill select all
ulelements descendant of elements with "identifiant" as an ID. The other
ulelements will not be selected. To select them you have to use an
A:nth-of-type(n)= This selector allows you to add the nth
Aelement on the page. For example
div:nth-of-type(5)will select the 5th division of the page.
A:nth-child(n+nb)= selects all
Aelements starting from the nth element. For example,
li:nth-child(n+16)will select all
lichild elements starting from the 16th element of the page.
span :nth-child(5)will select
spanwhich is the 5th child of its parent element.
A:first-child= selects the first child of the
A:last-child= selects the last child of the
For more examples of CSS selector, use the W3Schools guide: CSS Selector Reference.
Selector creation with Kameleoon
Creating a CSS selector with the editor
Let's say we want to select all the blue titles on this menu. In this case, we want to select all the
h4 elements, but only this page, not on the whole website.
First of all, identify and select the parent element containing all the menu, and select “View hierarchy panel” in the settings to display the panel on the bottom left of your page.
Here, the parent element is
Then, click on the settings button on the top right of the header and click on “Add custom selector”.
To select all the
h4 elements included in the
main-content, create the CSS selector
Select again one of the
h4 links, then select the CSS selector thanks to the "Selection" menu in the toolbar, as you can see below.
This will select all
h4 links included in
You can now change the color, the font, etc. Your changes will be made on all the selected elements.
Characteristics of Kameleoon selector
To see the CSS selector used, check the “View hierarchy panel” in the settings menu.
The hierarchy panel appears on the bottom left of your webpage.
In the example above, the path
#main-content indicates the CSS path of the selected element.
When you click on the "Selection" button of the toolbar, you have access to multiple selection advanced functionalities:
- Hierarchy: this is the CSS selector by default. Kameleoon selects the element according to its (unique) hierarchical position on the page.
- ID: allows you to select a unique element with its ID.
Tag: selects all the elements sharing the same HTML tag (for example, all the
Class: selects all the elements sharing the same HTML class.
Content: selects all the element with identical content (for example, all the "Add to basket" buttons).
Custom: select all the elements with the same CSS selector. This selector appears only if you previously added a new CSS selector on the page.