CSS Selector

What Do We Use A CSS Selector For?

We use a CSS selector to target or style specific HTML elements or groups of elements on a webpage.

With Doofinder, CSS selector will help you trigger the Layer or style your Layer.

How To Choose A CSS Selector

1. Click anywhere on your page with the right button and click "Inspect".
   
2. Select the box on the toolbar and inspect the page to find where you would like to trigger an element.
   
3. Once you know where to place it, search for the selector in the HTML code. The element you pick will be colored on the page. Unfold the element to find the selector and choose ID, class, or name . Copy the selector and paste it in the Admin.
   

   Remember to precede your selector with its correct written form: # for ID, e.g., #custom-search ; . (period) for class, e.g., .search-field; and, input[name=”name value”] for name, e.g., input[name=”s”].
   

   If you can’t identify the ID, class, or name you can right-click on the code and select copy > copy selector. Be aware that this copies the entire path, and is not recommended in case you change any part of the HTML in the future.

   
4. If you have difficulties determining the appropriate selector, contact our Support Team.

CSS Selector For Layer

To choose a CSS selector for your Layer click and Inspect your search box as there is where you want to trigger it. Once you have the selector, go to your Admin > Store Settings > Configuration > Enter the search input CSS selector > enter your selector, and Save.

For your Layer to display correctly on Mobile, make sure you have the correct selectors in Enter the search input CSS selector for this specific device. Inspect your search box on Toggle Device Toolbar and choose the selector indicated. If the selector is different, use a comma (,) to separate your selectors in the Admin.

In the case of the Embedded Layer, follow the same steps and add an insertion point with a CSS selector to indicate in which part of your website you want to place the Layer once it is triggered. Select the element or elements in your page that can hold embedded search results; take into account height and width to appropriately function and display a search result page.

Once you have your CSS selector to place it as an insertion point, go to Layers > select the chosen Layer > General Settings > Embedded Results > Insertion point > Enter your CSS selector for insertion point, and Save.