1. Help Center
  2. Compliance report

How to find the CSS selector for your compliance report

When running an audit for you website to obtain a compliance report, you have the option to use a CSS selector to get results based on a click on one of your site's elements: the "Agree" or "Disagree" button of a consent notice, for example. 

This guide will explain the steps to follow in order to find the CSS selector: 

Find the CSS selector on your browser

  1. Open a browser, for example Google Chrome.
  2. Go to your website.
  3. Right-click on the screen.
  4. Click on Inspect in the menu that appears.
  5. Click on the arrow icon at the top left of the Developer Tools screen.
  6. Hover your mouse over the element whose CSS selector you want to obtain. For example, if you place your mouse over the "Agree" button of a consent notice, you will see that the corresponding code appears highlighted.
    Screen Recording 2021-06-01 at 03.38.46 PM
  7. For your compliance report, you will need to indicate either the ID or the class that corresponds to the element inspected.

Indicate the CSS selector for your compliance report

  • When you add your website to create a compliance report in the Didomi console and you want to use the CSS selector, you need to indicate it in the Element to click on (CSS Selector) field:

  • You will need to enter either the class (.class) or ID (#id) of your HTML component. 

    For example, if the id is id="didomi-notice-agree-button", then you will have to type #didomi-notice-agree-button in the field.