It is sometimes useful to be able to change a group of elements sharing the same CSS class. You may want to change the color of all links in a menu or increase the font size of all the elements with the same CSS class.
Why CSS selectors?
Creating new CSS selectors is useful in several cases.
Multiple selection of a subset of elements
If you want to be able to select or clearly identify several elements with the same class, and edit their CSS style.
Technical issues on the page
Sometimes, there can be bugs on the A/B tested page, such as two elements sharing a same HTML ID. Normally, every HTML element on a page must have a unique ID (not shared with another element on the same page). If that’s not the case, Kameleoon cannot implement certain changes, such as switching elements.
Let’s take an example: you want to integrate a menu front of another, i.e. you need to re-position it. The two menus have a different look, but the same HTML ID. Kameleoon proceeds as follows:
- The tool retrieves the IDs which in our example are identical
The change can not be implemented, as the menus can not be differenciated via their ID. The problem can be solevd by creating a CSS selector, which enables Kameleoon to differenciate the two elements.
Unsufficient precision of hierachical selectors
Let’s say that you want to change the color of all your h4 links. No need for a CSS selector, this can be easily implemented using Kameleoon’s tag selection tool.
However, if your A/B test runs on several pages, this will probably change all
h4 links on your website. To avoid this problem, you have to create a new CSS selector allowing you to precisely identify the area of
h4 links to change.
Choosing a CSS selector
Detecting an ID and a CSS class
With CSS, elements of an HTML page can have several attributes. You need to identify 3 of them to benefit from all features Kameleoon’s CSS selectors pffer:
- Type of element or HTML tag:
- CSS class, positioned as an attribute of the element
class="myClass", enabling you to retrieve a group of display parameters (color, font, layout, etc.) on the CSS style sheet.
- ID, positioned as an attribute of the element
id="myID", allowing to precisely and uniquely identify an element in the page.
Let’s take the following example:
<h1 class="landingHeader" id="landing_header_6747">Bienvenue</h1>
- Type of element:
h1tag; you can reach it directly by typing
h1in the the CSS selector text field.
- CSS class:
landingHeader; you can access it by putting a
.in front of the name class. Four our example, type
.landingHeaderin the selector.
Be careful, several elements can share the same class, this is often the case with similar elements.”
.landingHeader” will tell Kameleoon to retrieve all elements sharing this CSS class.
- CSS ID:
landing_header_6747; to find this element with a selector, put a
#in front of the ID.
We have listed the main CSS selectors which help you fine-tube your selection of elements on your HTML pages. You can also combine several selectors.
#identifiant= ID selector; targets an HTML element via its ID.
.classe= Class selector; unlike the ID selector can identify several HTML elements sharing the same CSS class.
A= This selector selects all the type
Aelements. For example, the selector will select all type
AHTML links in a page .
A B= This selector targets all
Belements included in
Aelements. For example,
ul Awill select all
AHTML links included in a
A + B= This selector identifies the first
Belement located immediately after an
Aelement. For example
ul + pselecst the first paragraph after a
A > B= This selector selects only
Belements that are descendants of
Aelements. For example,
#identifiant > ulwill select all
ulelements that are descendants of elements with “identifiant” as an ID. The other
ulelements are not selected. To select them you have to use an
A:nth-of-type(n)= This selector allows you to identify the nth
Aelement on the page. For example
div:nth-of-type(5)selects 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.
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.
Creating a selector with Kameleoon
Via the graphic editor
Let’s say we want to select all blue titles on this menu. In this case, we select all the
h4 elements, but only this page, not on the whole website.
In the menu located in the header on the left, click on “General setup” then on “Display”. Check “Hierarchy Panel”.
A box will appear on the bottom left of your page. It enables you to determine the path of the selected element.
Here, the parent element is
In the previous menu, click on “Personalized selectors”.
Then create the CSS selector of your choice. To select all the
h4 elements included in
main-content, create the CSS selector
Select one of the
h4 links, then select the CSS selector thanks to the “Selection” menu in the toolbar, as shown below.
This will select all
h4 links included in
Once you have created your CSS selector, you will be able to select it in the “CUSTOM” section.
You can now change the color, the font, etc. Your changes are implemented on all selected elements.
Characteristics of the Kameleoon selector
To check which CSS selector is 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 advanced selection features:
- ID: selects a unique element on the page with its ID. This is the default selection mode of Kameleoon when the block selected on the page has an HTML ID.
- Hierarchy: default CSS selector when there is no ID on the selected block. Kameleoon selects the element according to its (unique) hierarchical position on the page, by creating a hierarchical path from one of the parent blocks containing an HTML ID.
- Tag: selects all elements sharing the same HTML tag (for example, all the
- Class: selects all elements sharing the same HTML class.
- Content: selects all the element with identical content (for example, all “Add to basket” buttons).
- Custom: select all elements with the same CSS selector. This selector appears only if you previously added a new CSS selector on the page.