1865042 - Add unmatched style to parent rule unmatched selectors for nested rules

Status: NEW

(DevTools :: Inspector: Rules, enhancement, P3)

Description

[Nicolas Chevobbe [:nchevobbe]]

Steps to reproduce

1. Navigate to data:text/html,<meta charset=utf8><style>body, doesnotexist { h1,doesnotexisteither { color: tomato; } }</style><h1>Hello
2. Open the inspector
3. Select the <h1> node

Actual results

The rule is the following:

body, doesnotexist {
  h1, doesnotexisteither {
    color: tomato;
  }
}

In the rule actual selector, h1, doesnotexisteither, doesnotexisteither is marked as unmatched.
But in the parent rule selector, body, doesnotexist, doesnotexist is not marked as unmatched

---

This can be quite tricky as the parent selector can be used in nesting "after" the selector, or in ":not()", and there can be many nesting level

h1 {
  body > & {}
  :not(&) {
    :not(&) {}
  }
} 

We can't just extract the parent selector, and try to see how the current selected element fits into it