Skip to main content
All CollectionsCampaigns and Segments
How to extract CSS Selector from a WebPage
How to extract CSS Selector from a WebPage
Sachi Dalmia avatar
Written by Sachi Dalmia
Updated over a week ago

Follow these steps if you want to place your campaign apart from the sections we allow you to select in the preview.

  1. In the browser, right-click on the page in order to open the options menu and select Inspect

2. This should open the DevTools of the browser.

3. Use the inspect tool on the element you want to extract the CSS selector:

4. Select the element you want on the page, it will highlight the HTML element for it:

5. Right-click on the HTML element and select Copy then Copy Selector:

6. Head over to the Advanced placement option and paste the selector to place the campaign above, below or replace the CSS that you selected.

Best Practices

Always select the closest div

If the element you wish to select is anything other than a div, make sure you always select div of that element. Some elements such as img, svg might give issues with replacement or element click.

For example, in the below example, if you wish to select the image section on the left, the element is of type svg but it is recommended that you select its parent div element as follows:

Did this answer your question?