CSS selector creation

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.

  • Generate JavaScript code, allowing to make the insertion, similar to this one:

    #(identifiant_menu).insertBefore(#identifiant_menu)

    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: div, table, h1, h2, h3, section, body, header, li, ul, etc.
  • 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:  h1 tag; you can reach it directly by writing h1 in 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 .landingHeader in the selector.
    Be careful, several elements can share the same class. It is often the case with similar elements. Writing .landingHeader will 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.

Examples

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 A elements. For example, the selector will select all HTML links of A type.
  • A B = This selector allows you to target all B elements included in A elements. For example, ul A will select all A HTML links included in a ul list.
  • A + B = This selector allows you to select the first B element located immediately after an A element. For example ul + p will select the first paragraph after a ul list.
  • A > B = This selector will select only B elements descendant of A elements. For example, #identifiant > ul will select all ul elements descendant of elements with "identifiant" as an ID. The other ul elements will not be selected. To select them you have to use an A B selector. 
  • A:nth-of-type(n) = This selector allows you to add the nth A element 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 A elements starting from the nth element. For example, li:nth-child(n+16) will select all li child elements starting from the 16th element of the page.  span :nth-child(5) will select span which is the 5th child of its parent element. 
  • A:first-child = selects the first child of the A element.
  • A:last-child = selects the last child of the A element.

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 #main-content

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 #main-content h4

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 #main-content

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 h4 elements).

  • 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.

Have more questions? Submit a request
Powered by Zendesk