CSS selector creation

3

min

quiz

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
  • It generates a JavaScript code necessary to implement the position change, which might look like this:
    #(identifiant_menu).insertBefore(#identifiant_menu)

    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: div, table, h1, h2, h3, section, body, header, li, ul, etc.
  • 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:  h1 tag; you can reach it directly by typing h1 in 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.landingHeader in 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.

Examples

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 A elements. For example, the selector will select all type HTML links in a page .
  • A B = This selector targets 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 identifies the first B element located immediately after an A element. For example ul + p selecst the first paragraph after a ul list.
  • A > B = This selector selects only B elements that are descendants of A elements. For example, #identifiant > ul will select all ul elements that are descendants of elements with “identifiant” as an ID. The other ul elements are not selected. To select them you have to use an A B selector.
  • A:nth-of-type(n) = This selector allows you to identify the nth A element on the page. For example div:nth-of-type(5) selects 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) selects span which is the 5th child of its parent element.
  • A:first-child = selects the first child of theA 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.

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 Capture_d_e_cran_2018-05-25_a__14.35.15.png 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 #main-content.

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

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

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:

  • Hierarchy: default CSS selector. Kameleoon selects the element according to its (unique) hierarchical position on the page.
  • ID: selects a unique element with its ID.
  • Tag: selects all elements sharing the same HTML tag (for example, all the h4 elements).
  • 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.