How to find CSS selector in Chrome browser

Thu-Feb-2023
8

You can use the Chrome DevTools to find the CSS selector of an element on a web page. Here’s how:

  1. Right-click on the element you want to find the selector for and select “Inspect” from the context menu. This will open the Elements panel of the DevTools.
  2. In the Elements panel, the selected element will be highlighted in the HTML code. Look for the “Styles” panel on the right-hand side of the DevTools.
  3. In the “Styles” panel, you’ll see all the CSS rules that apply to the selected element. You can scroll through the list of styles to find the one you’re interested in.
  4. To find the selector for a particular style, click on the style name. This will take you to the CSS source for that style in the “Sources” panel of the DevTools.
  5. In the “Sources” panel, you’ll see the CSS code that defines the selected style. The selector for the style will be highlighted in the code.
  6. You can also hover over the selector in the CSS code to highlight the element on the web page.

That’s it! You should now be able to find the CSS selector for any element on a web page using the Chrome DevTools.