How to get CSS selector for HTML element?

Below is a short guide on how you can get CSS selector from HTML element

Quick guide in video

Step-by-step guide

1) From your chrome browser, go to

2) In this example, we're going to extract CSS selector for the CTA text within the red box.

3) Within the page, right click and select Inspect. This should open up Chrome developer tool. 

4) Within the developer tool, locate and click on the leftmost option.

5) Then select on element to extract CSS selector.

6) Upon selection, focus on Elements tab will be on selected element. Hover over the highlighted line of code and select Copy > Copy Selector to get CSS selector for element. It should look something like #app > div > div > div.hero > div > div > h1 .