All webpages are made up of many HTML elements e.g. buttons, sections and links.
CSS selectors help us to select specific HTML elements on the page (usually for styling purposes). The simplest example of a selector is to just use the element name as below:
CSS Selector: button
If that’s all you want to do we already provide a list of common element types available in the UI, all you need to do is tick the relevant box in the sidebar and all elements of that kind on the page will be selected.
However, sometimes you’ll want to be more specific e.g. select only buttons of type ‘primary’, as below:
HTML: <button class=”primary”>
CSS Selector: button.primary
The advanced mode allows you to use the full range of CSS selectors to be specific about what elements you want to track.