Fix false positives for vendor prefixed pseudo-elements in no-descending-specificity

[akrawitz]

Clearly describe the bug

There are false positives for the 'no-descending-specificity' rule when an rule selecting a vendor-specific pseudo-element on an element follows a rule selecting that same element with a pseudo-class.

Which rule, if any, is the bug related to?

'no-descending-specificity'

What CSS is needed to reproduce the bug?

input[type=range]:focus {
  color: #ff0000;
}

input[type=range]::-webkit-slider-thumb {
  color: #ff0000;
}

What stylelint configuration is needed to reproduce the bug?

{
  "rules": {
    "no-descending-specificity": true
  }
}

Which version of stylelint are you using?

9.3.0

How are you running stylelint: CLI, PostCSS plugin, Node.js API?

CLI with stylelint "**/*.css"

Does the bug relate to non-standard syntax (e.g. SCSS, Less etc.)?

Standard CSS, but with a vendor-specific pseudo-element.

What did you expect to happen?

No error to be flagged. The description of this rule states:

There's one other important feature: Selectors targeting pseudo-elements are not considered comparable to similar selectors without the pseudo-element, because they target other elements on the rendered page. For example, a::before {} will not be compared to a:hover {}, because a::before targets a pseudo-element whereas a:hover targets the actual .

What actually happened (e.g. what warnings or errors did you get)?

The following error was flagged:

Expected selector "input[type=range]::-webkit-slider-thumb" to come before selector "input[type=range]:focus" (no-descending-specificity)

[jeddy3]

@akrawitz Thanks for the report and for using the template.

I can reproduce this issue.

The following won't trigger the issue:

a:hover {}
a::before {}

Whereas the following will:

a:hover {}
a::-webkit-slider-thumb {}

As you pointed out, it appears to be specific to vendor prefixed pseudo-elements.

Feel free to contribute a fix.