Why are different selectors shown for the same element based on how you select it in browser dev tools?

Question

I know of multiple ways to determine a selector of an element in a browser code inspector:

• locate the selector in the HTML pane of the inspector

• hover over the selector in the HTML pane, and a tooltip will pop up that will show the selector, but that will be more verbose or different from the selector shown in the HTML pane

• locate the selector that is not grayed out in the styles pane of the inspector

• right click on the selector in the HTML pane, then click "copy selector", and that will be a selector with a higher specificity

Often all four of these have a different format or specificity.

Here is an example: the bbPress reply box. Selector #1 in the html pane, in the tooltip, if you hover the element:

textarea#bbp_reply_content.bbp-the-content.wp-editor-area

selector #2 copied as "CSS Selector" from the right-click menu of the element in the dev tools html pane:

div.wp-editor-container:nth-child(1) > textarea:nth-child(2)

#3 in the dev tools styles pane:

#bbpress-forums div.bbp-the-content-wrapper textarea.bbp-the-content

Three very different formats and with different specificity. Why are these all so different (including different specificity)?

Answer 1

Here is an example, the bbPress reply box. Selector #1 in the html pane, in the tooltip, if you hover the element:

textarea#bbp_reply_content.bbp-the-content.wp-editor-area

I'm assuming you mean the HTML pane in the browser developer tools. The HTML view here is focused on the element that you are looking at, and will show the element name, any ID, and any Classes that might affect the selection (an ID must be unique, for example, and you can have lots of the same element with the same, similar, or completely different sets of classes applied). So the result you're getting here is contextualized to the view you're in, and what you're actually looking at:

ElementName.ID.ClassName(s)

You're not asking for a full selector to get this element, you're just asking for this exact element. Any ancestors are not important for what you're asking.

However, while this would be a valid selector, it's dangerous to refer to it as a selector for that very reason above; if you're looking for selector to use to target a specific element, this will miss out on all kinds of things in CSS that affect whether styles get applied. Cascading styles/precedence, specificity, and more could cause such a string to fail if used as a selector.

selector #2 copied as "CSS Selector" from the right-click menu of the element in the dev tools html pane:

div.wp-editor-container:nth-child(1) > textarea:nth-child(2)

This is also a selector, and as you can see it's got more information before you get to the "textarea" element. However, it's still focusing on the "HTML content" context for that specific element... it doesn't care about IDs or classes that might be assigned to the final element. It's just saying "give me a CSS selector that, all else being equal, would select this element".

It's hard to say since it's a different element as the first example, and we can't see the full markup of the page you're using for your example, but I'm guessing this is a top-level div inside the body... either the only one, or the only one with that class. The browser is giving you just enough information to make sure you don't go down a different rabbit hole of elements by mistake.

Number 3 in the dev tools styles pane:

#bbpress-forums div.bbp-the-content-wrapper textarea.bbp-the-content

This is a CSS selector that someone wrote in a CSS file. It is showing up because it is a selector that applies to the element you selected. I'm sure there are more, even if they are just the default browser styles. For example, if you look in this location for an element on any Stack Overflow page, you'll probably see a whole host of entries:

While the other two are generated from the browser, this selector is one that a person decided to use and wrote out based on their desire for specificity and other qualifications for the styles they wanted to apply to this element.