CSS Selector

We use a CSS selector to indicate where on the website we want to trigger the layer when the customer clicks. Normally it is the "search box" or the magnifying glass icon.

CSS selectors select HTML elements according to its id, class, name, etc. To identify which CSS selector to use, you must inspect your HTML code and locate one of these elements. On your website, simply right-click and select "Inspect".

enter a css selector

How to Choose The CSS Selector

  1. Click on the icon to select an element in this page to inspect it.
  2. Select the element, by clicking on it, on which you want your layer to be triggered when the user clicks. For this example, we are going to choose the search box.
  3. Once your element is selected, the piece of HTML code will be colored below.

If you take a look at the code, you will be able to see there is an 'id' a 'class' and a 'value name'. You can use any of them, knowing that each of them differ in the way they are written:

  • For ID, you must precede the text with a #. e.g.: #custom-search
  • For a class, you must precede the text with . Also note that spaces between words are filled with periods, no spaces are allowed. e.g.: .search-field
  • For the name value, you must enter it in this format input[name="name value"]. e.g.:input[name="s"]
type a css selector

An alternative way to find the CSS selector, when you fail to identify the ID, CLASS or NAME, is to right-click on the code, choose "Copy" and "Copy selector". Note that this will copy the entire path and is not recommended in case you change any part of the HTML code in the future.

copy selector

This is the result of this action and what we will use as 'trigger' when requested by pasting this code snippet: #custom-search.

copy selector

🗒️ Note: The trigger can be different on desktop and mobile, and it has to be unique so that it is activated only when the right place is clicked.

CSS Selector For Embedded Layer

In the case of the embedded layer, we use a CSS selector as an insertion point to indicate in which part of our website we want to place the layer once it is triggered. Use a CSS selector, like #main-content or .results-container to choose the element or elements in your page that can hold embedded search results. You must make sure that the selector is appropriate to function as a search results page, taking into account width and height.

css selector for embedded layer

The procedure for inspecting HTML elements and choose the CSS selector is the same as described above. In this example, we can use #content or .site-content as CSS selector.

use a css selector