How To Get Css Selector In Chrome

by

When working with web development, it is often necessary to inspect elements on a webpage and obtain their CSS
selectors to apply styles, manipulate the DOM with JavaScript, or even for web scraping purposes. Google Chrome,
being one of the most popular web browsers, offers a built-in set of developer tools that make it easy to
obtain CSS selectors. In this blog post, we will walk you through the steps on how to get a CSS selector in
Chrome.

Step 1: Open Developer Tools

To get the CSS selector of an element using Chrome, you first need to open the Developer Tools. You can do this
in one of the following ways:

  • Right-click on any element on a webpage and select “Inspect” from the context menu.
  • Press Ctrl+Shift+I (Windows/Linux) or Cmd+Opt+I (Mac) on your keyboard.
  • Click on the three-dot menu icon in the top-right corner of Chrome, then go to “More tools” and select “Developer tools.”

Step 2: Select the Element

Once the Developer Tools panel is open, you can select the element you want to get the CSS selector for in one
of the following ways:

  • Click on the “Select an element in the page to inspect it” icon (arrow icon) in the top-left corner of the
    Developer Tools panel, then click on the desired element in the webpage.
  • Find the element manually in the “Elements” tab of the Developer Tools panel by expanding the DOM tree.

The selected element will be highlighted in the DOM tree, and its corresponding styles and properties will be
displayed in the right-side panels.

Step 3: Get the CSS Selector

To get the CSS selector of the selected element, simply right-click on the highlighted element in the DOM tree
and select “Copy” > “Copy selector” from the context menu.

The CSS selector will be copied to your clipboard, and you can now paste it in your stylesheet, JavaScript code,
or web scraping script.

Here’s an example of a CSS selector obtained in Chrome: 

    #main > div.container > div.row > div.col-lg-8

This CSS selector refers to a <div> element with the class “col-lg-8” inside a <div> element with the class
“row”, which is inside a <div> element with the class “container”, which is a direct child of an element with
the ID “main”.

Conclusion

In this blog post, we have demonstrated how to get a CSS selector in Chrome using the built-in Developer Tools.
Obtaining CSS selectors is essential for web developers, and Chrome makes it a simple and straightforward
process. Happy coding!