How to Get CSS Selectors to Work in The Developer Tools for Chrome 17

How to get CSS selectors to work in the Developer Tools for Chrome 17?

I haven't been able to find any workaround to get CSS selectors working in the search bar again. Rejoice, for they have returned!

In any case, you can still use document.querySelectorAll() with a selector in the JS console, then right-click on any of the matched elements and choose Reveal in Elements Panel and it'll show you where it is in the DOM, just as with previous versions.

How can I get the CSS Selector in Chrome?

Although not an extension, I did find a bookmarklet called Selector Gadget that does exactly what I was looking for.

Web Developer mode in Chrome or Firefox: how to get an object's CSS full selector?

Right-click the element in the inspector, choose the Copy submenu, and each browser gives you slightly different options:

• Chrome (and other Chromium-based browsers including the new Microsoft Edge) gives you the option to copy the selector, which produces a somewhat optimized but still fairly long selector that will uniquely identify the element.

• Firefox gives you two options: "CSS Selector" that functions mostly the same as Chrome but gives you a much more optimized selector, and "CSS Path" that gives you the same as what you're pointing to in your screenshot, the entire path to that element starting from the root. "CSS Path" is designed for web testing tools but it's probably excessive for most other use cases, which I'm guessing is why Chrome doesn't have a similar feature.

Check out these other answers in which I explain a bit more how these features work:

• How does Chrome dev tools generate CSS selectors?
• Chrome Dev Tools CSS selectors Method

How does Chrome dev tools generate CSS selectors?

It's not possible to give an exact analysis of a browser's implementation unless I look at the source itself. But what I can say is that the browser needs to ensure that the style rule that you add will only apply to that specific element in the working DOM, and classes, whose purpose is to group one or more related elements, are not very well-suited for this purpose.

Because of how classes work, the browser can't assume that your class is only assigned to that span element, because it doesn't know how you author your HTML. The example given by NichoDiaz illustrates a simple but valid example of this: a .helper may not necessarily be a body > div > span, because it could very well be a body > div > div > span instead, either now or later.

So instead of making that assumption about the helper class (even though in your DOM only one element has it), it makes an assumption about the structure of your elements instead, which is far more reliable. Since it sees that there is only one span that is a child of a div that is a child of body, it generates the selector body > div > span for the element for which you've chosen to add a style rule. (Presumably, the reason why it starts with body > instead of html > body > is because body is always a child of html, which makes that additional constraint totally redundant.)

Of course, once you add a second span element, the style rule will apply to that element as well. Again the browser cannot anticipate this, but you can easily modify the rule to add :nth-child(1) to the end of the selector if you don't want the style rule applying to that new element.

If you add the second span element before creating a new style rule on the first, you'll see that the browser generates a slightly more specific selector, body > div > span:nth-child(1). If it had tried to generate a selector using .helper and not :nth-child(1), i.e. body > div > span.helper, it would match both elements, which is clearly not the intended result of highlighting one element and adding a style rule for that specific element.

How to search DOM elements using XPath or CSS selectors in Chrome Developer Tools?

You can use $x in the Chrome javascript console. No extensions needed.

ex: $x("//img")

How to search for only HTML elements using browser web dev tools?

There isn't any reliable way to guarantee that you only find elements, and not strings containing your search term, in any browser.

<form is going to find you any elements in the HTML source matching that:

• start tag beginning with <form
• and the string "<form" in page content

The XPath expression //form, likewise, is going to find you both elements matching that in the HTML source:

• (X)HTML elements (tags) named form for this XPath
• and the string "//form" in page content

Firefox

For Firefox the MDN documentation of Firefox Developer Tools explains 3 search-options in Examine and edit HTML, section "Searching":

There are three types of searches that are performed automatically depending on what you enter, a full text search, a CSS selector search, and an XPath search.

In your case this could be for example following CSS selectors:

• * form
• * > form
• :root form
• form:not(_)
• form:nth-child(n)

But these all suffer from the same weakness as the two above in other browsers. The only way to work around this is to narrow down your search as much as possible to reduce the chances of matching page content.

Google Chrome copy CSS Path in Developer Tools

Chrome has updated this option

In chrome after recent update this option has been changed from

(right click on the element in Elements Window) > Copy CSS path
to :

(right click on the element in Elements Window) > Copy > Copy selector

Find out where the CSS codes are used in the web page after Pick out them via Chrome DevTools?

Hei, instead of going to the source options, go in the Elements tab and look over the rule you are searching for, press on it and on the right you can see which file applies that style, and at which row. Like the screenshot below (just an example)

EDIT

2 CSS files use the same class name for the same CSS rule, how to find such a case?

Well, there are cases where multiple CSS files could apply style at the same class element. This divides into 2 categories:

1. The one that applies different styles to the same class
2. The one that applies the same styles to the same class

In the first case, there are no issues, and both styles will be applied. And to track those styling rules, you'd need to check both files.

In the second case, the style will be applied by the last rule, so the last read by the system (example below)

Also, on the second posted screenshot, you can see that the element that has "no applied style" simply does not exist, and is not a real element but a string

You can see in this screenshot that the image element is written between double quotes and does not represent a real HTML element. so no styling will be applied

---

Related Topics