Select an element and a parent element

3

min

quiz

The selection tool enables you to select one or more items.

Basic selection

To select an element, make sure the “Editing mode” is activated in the top right corner of the header. If you are in “Navigation mode”, click on it to change modes.

If no elements are selected, place your cursor on an element to display its ID and a selection frame. The element to be selected will be covered by a blue zone. Click once to select the element.

Once the element is selected, the blue zone disappears, while the selection frame remains.

Note that you can display the element’s HTML tags by activating this option in the Preferences.

Fine-tune your selection

When an element is selected, the following panel appears:

If you need to move it, simply drag and drop it anywhere on the page.

The central part of the panel shows you which element is selected as well as its parent elements. By clicking on the name of the parent element, you select it instead of the element you selected previously.

In this example, « List item » is the original selected element, « List » and « Block » its parent elements.

To see the whole list of parent and child elements, click on the icon on the left.

A drop-down list will open with all elements. Scroll up to see the child elements and scroll down to see the parent elements.

Tip: Sometimes you can’t select an element because it is hidden by another one. In this case, use this tool to select it.

Multiple selection

To select several elements, start by selecting one of them.

Once the element is selected, click on the green icon on the right:

A list opens, enabling you to fine-tune your selection.

Depending on the element you have selected, several multiple selection criteria are available:

  • Hierarchy: default CSS selector. Kameleoon selects the element according to its (unique) hierarchical position on the page.
  • ID: selects a unique element via its ID.
  • Tag: selects all elements sharing the same HTML tag (for example, all h4 elements).
  • Class: selects all elements sharing the same HTML class.
  • Content: selects all element with identical content (for example, all “Add to basket” buttons).
  • Custom: selects all elements with the same custom CSS selector. This selector appears only if you previously added a new CSS selector on the page. For futher information, you can read our article about CSS selectors.
  • Child elements, above the selected element on the list.
  • Parent elements, below the selected element on the list.