Skip to main content

Element CSS Selectors

Produktly has many features where you can use CSS selectors to target elements on your page. For example when you want to highlight a specific element in your page, or when you want to position a smart tip next to a specific element, or listen to e.g. click events on certain element.

What's a good CSS selector to use?​

For the best results, we recommend using unique CSS selectors that are not likely to change. For example, using #id selectors is a good practice, as they are unique by definition. If you use .class selectors, make sure that the class is not used in multiple places on the same page.

You can also add data- attributes to your elements to make them easier to target. For example, you can add data-produktly="my-id" to your element, and then target it with [data-produktly="my-id"].

How to find CSS selectors​

Option 1. Using our Chrome extension​

Install our Chrome extension from the Chrome Web Store

With our Chrome extension you can select the elements on your page using our visual selector tool. You just activate the tool, and then click the element you want to target. The extension will then automatically find the CSS selector and add it to the input field you are selecting for.

Important: The visual selector tool works only if the element can be uniquely identified on the page. If the element is not unique, the tool will not work.

Option 2. Using browser developer tools​

The browser developer tools is another way to find CSS selectors. You can right-click the element you want to target, and then select "Inspect" from the context menu. This will open the developer tools and highlight the element you clicked. You can then right-click the highlighted element in the developer tools and select "Copy" -> "Copy selector" to copy the CSS selector to your clipboard.

Once you have the CSS selector copied, you would just paste that into the relevant input field in Produktly.

Option 3. Consult your developer​

If you are not sure what CSS selector to use, you can always ask your developer. They will know what selectors are already defined, and they can help you find or add the best CSS selector to use for your specific use case.