961032 - [Inspector] Show which CSS selector matches ::before and ::after elements

Status: RESOLVED FIXED

(DevTools :: Inspector, defect)

Description

[Julien Wajsberg [:julienw]]

STR:
* have a CSS rule with a compount selector (2 or more selectors separated with a comma)
* have an element matched by one of these selectors
* select this element in the inspector view

Expected:
* We see the CSS rules that applies to this element.
* We see which subselector matches this element.

Actual:
* We see the CSS rules that applies to this element.
* we don't know which subselector matches this element.

It would be a very useful addition for selectors with a lot of subselectors.

Maybe a easier "fix" could be to go to a new line when there is a comma in a selector ?

Comment 1

[Patrick Brosset <:pbro>]

Note that the subselector that did match has a different color than the others.
Were you thinking of only showing that one subselector?

Comment 2

[Julien Wajsberg [:julienw]]

Oh, you're right, what I'm asking is working.

Except for pseudo elements ;) which was the case I was working on.

Comment 3

[Brian Grinstead [:bgrins]]

(In reply to Julien Wajsberg [:julienw] (away May 8th) from comment #2)
> Oh, you're right, what I'm asking is working.
> 
> Except for pseudo elements ;) which was the case I was working on.

Once we have the :before and :after pseudo elements in the markup view (bug 920141), I believe this will work automatically.

Comment 4

[Brian Grinstead [:bgrins]]

Should be working now that 920141 landed