Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

akrawitz opened this Issue Jan 28, 2019 · 1 comment


2 participants
Copy link

commented Jan 28, 2019

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?


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?


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)

This comment has been minimized.

Copy link

commented Jan 28, 2019

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

@jeddy3 jeddy3 changed the title False positives for 'no-descending-specificity' with vendor-specific pseudo-elements Fix false positives for vendor prefixed pseudo-elements in no-descending-specificity Jan 28, 2019

@ntwb ntwb closed this in #3987 Mar 31, 2019

ntwb added a commit that referenced this issue Mar 31, 2019

fix: false positives for vendor specific prefixes in `no-descending-s…
…pecificity` rule (#3987)

Please read the following. Pull requests that do not adhere to these guidelines will be closed.

Each pull request must, with the exception of minor documentation fixes, be associated with an open issue. If a corresponding issue does not exist please stop. Instead, create an issue so we can discuss the change first.

If there is an associated open issue, then the next step is to make sure you've read the relevant developer guide:

- Creating a new rule:

- Adding an option to an existing rule:

- Fixing a bug in an existing rule:

Once you've done that, then please continue by answering these two questions:  -->

> Which issue, if any, is this issue related to?

fixes #3929

> Is there anything in the PR that needs further explanation?

No, it's self explanatory.

Unfortunately we don't have repo with list of this pseudo classes so we need maintain this manually
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.