4

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

Sabuncu
  • 5,095
  • 5
  • 55
  • 89
  • 1
    Can you provide a link to the page? Or another page that demonstrates the same behavior? – Kayce Basques Dec 05 '16 at 22:47
  • Why don't you click on it and see if you can figure it out? –  Dec 05 '16 at 22:48
  • @KayceBasques The page is within a banking application, reached after a login process (password and SMS verification). – Sabuncu Dec 05 '16 at 22:49
  • @torazaburo I know what the link does. It's a dropdown menu entry, and brings up another page where account transactions are listed. It's the CSS syntax that I am trying to understand. – Sabuncu Dec 05 '16 at 22:51
  • 1
    I'm saying that the whole `li#primaryL1.dropdown.pNavLi.pNavId:(1)` thing is clickable, and I'm wondering where it leads. –  Dec 05 '16 at 22:53
  • @torazaburo Ah! Sorry, I'll check. – Sabuncu Dec 05 '16 at 22:54
  • "Inherited from `li#primaryL1.dropdown.pNavLi.pNavId:(1)`" does not mean that a selector is operating on that definition exactly. You can see from the screencap that it's based on the `li` rule defined by chrome in this instance. Basically, it's not a CSS selector. It's just an identifier being used by chrome. The real selector in use is `li` – Joseph Marikle Dec 05 '16 at 22:57
  • Just a wild guess, but is it some kind of shadow DOM thing? –  Dec 05 '16 at 22:59
  • @JosephMarikle No. Inherited means something else. Rules taken from the user agent style sheet are not shown as inherited (because they're not). What this apparently means is that these properties are inherited properties which are inherited from an ancestor element for which the property is assigned via the user agent style sheet. Which is slightly weird because `display` is not inherited--could this code be playing games with `display: inherit;`? –  Dec 05 '16 at 23:01
  • What version of Chrome? What do other browsers show? – Oriol Dec 05 '16 at 23:03
  • @torazaburo Not entirely sure what you mean, but I still hold that the inherited from verbiage does not necessarily mean that a selector using that string is in use. You can test it now with this SO page. Inspect any child of `` and you'll see an "Inherited from" for `body.question-page.new-topbar`, but if you inspect the `` itself, there is no such CSS rule. – Joseph Marikle Dec 05 '16 at 23:04
  • @Oriol Chrome Canary, Version 57.0.2942.0 (Official Build) canary (32-bit). Will check Firefox, thanks. – Sabuncu Dec 05 '16 at 23:08
  • It means that `font-family`, an inherited property, is being inherited onto this child element, because it does not have any `font-family` property declaration in any rule applying to itself, from a particular rule defined to apply to the parent element, the body. It shows "inherited from `body.question-page.new-topbar` because that it how it displays the element being inherited from, not because there's some rule that matches that selector. –  Dec 05 '16 at 23:13
  • @Oriol and others: I have added the output from the FF Styles pane, which is different than Chrome. – Sabuncu Dec 05 '16 at 23:16
  • @Sabuncu Once again, this is because `li#primaryL1.dropdown.pNavLi.pNavId:(1)` is not a CSS selector anywhere. It's an identifier that is created by chrome for its element inspector. It shows you what **element** the style is inherited from, not what **CSS style rule** it's inherited from. It makes sense that FF would be different. – Joseph Marikle Dec 05 '16 at 23:39
  • @Joseph Marikle: Forget my previous comments; I posted an answer. – BoltClock Dec 06 '16 at 03:03

1 Answers1

1

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).

Community
  • 1
  • 1
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • Thank you for your attention to this and my previous/deleted question. I understand the gist of your answer, in paragraph 4, that the parentheses in question are used for an HTML class attribute, not CSS selector. But I don't understand the significance of *li* followed by a period, which you mention in your 2nd paragraph. – Sabuncu Dec 06 '16 at 18:59
  • 1
    @Sabuncu: As you know, a period denotes a class selector. So a selector like li.example matches li elements with a class called "example". What you see in the inspector, li#primaryLi1.dropdown.pNavLi.pNavId:(1) looks like a selector, but as you pointed out earlier the ":(1)" portion doesn't look like it belongs, since as I mentioned previously parentheses have special meaning in selectors and so cannot normally appear in that context. Except the dev tools don't even try to make the selector look valid, and I gather that's the reason for your initial confusion. – BoltClock Dec 07 '16 at 03:20