CODEWITHSUNDEEP
csscss-selectorsgoogle-chrome-devtools
Sabuncu
Sabuncu

Reputation: 5264

CSS selector with parentheses and some sort of index in style inspector

When looking at the elements of a page that I am analyzing using Chrome DevTools, I am seeing the following weird display:

enter image description here

What is that "(1)" in the end? Since the source is user agent stylesheet, I can't drill down any further.

In the Elements panel, I see similar weirdness:

enter image description here

I thought parentheses were not permitted in CSS selector names. What is the "primaryNavId:(primaryLi1)" being used above?

UPDATE:

A more detailed screencap of the "inherited from" line (Styles pane):

enter image description here

When I click on the "inherited from" line, I get the following in the Styles pane:

enter image description here

UPDATE 2 - FIREFOX INSPECT:

Firefox displays the same information in the Elements pane for the item in question, but the Styles panel shows it differently, as follows:

enter image description here

Upvotes: 4

Views: 1304

Answers (1)

BoltClock
BoltClock

Reputation: 723648

What a mess. Now I understand why you tagged your original question (and this one) .

To start, browser developer tools naïvely assume that classes and IDs don't contain any special CSS selector characters and can therefore be represented in CSS selector notation without any escape sequences. So what you get is something that looks like a selector, but on closer inspection is actually malformed. You can see evidence of this in pretty much every browser's developer tools. The breadcrumb navigation, for example, in every one of them will list the li element as li followed by a period (for a class selector) followed by the class name without any escape sequences. Evidently the same appears to hold true for IDs.

It would seem that Google Chrome uses this same notation for "Inherited from" labels. Firefox is smart enough to only list the element's element type (which is far more predictable), i.e. "Inherited from li", and display the actual style rule and the actual selector from the source CSS, but its breadcrumb navigation suffers from the same problem making it kind of moot.

What you're looking at in the element inspector, however, is not a selector. It's an HTML class attribute. The syntactic rules are completely different. And that's why I said that this answer of mine that you previously linked to was completely irrelevant to your original question. But I can see why you're confused, seeing as HTML and CSS are closely related and CSS has dedicated class and ID selectors. (I suspect there wouldn't be any confusion if we were forced to use quoted attribute selectors for all attributes from the beginning — but attribute selectors weren't even around until CSS2.)

As to why the class name that's reflected in the Styles pane is different from the one that's reflected in the element inspector, the reason for that is not clear. Either you're inspecting different elements altogether, or something else is at play (and judging by the cryptic-looking class names, it may well be some funky client-side scripting framework voodoo magic).

Upvotes: 1

Related Questions