Skip to content

Conversation

@parzh
Copy link

@parzh parzh commented May 4, 2019

See microsoft/vscode#72608 (comment) for a quick reference

In CSS3, pseudo-classes (such as :hover, :focus, or :invalid) and pseudo-elements (such as ::before, ::after etc.) have some noticeable differences:

  • pseudo-classes are more specific than pseudo-elements;
  • pseudo-classes are prefixed with :, while pseudo-elements start with :: (though for backwards compatibility this is not enforced);

Currently, they are being distinguished by amount of semicolons, which produces incorrect results when encountering backwards-compatible code:

image

Specificity here is expected to be (0, 0, 3), but got (0, 1, 2). That's because pseudo-element was incorrectly parsed as pseudo-class.

image

Here the number of colons (::) corresponds to the entity type (pseudo-element), so the specificity is displayed correctly.

This PR fixes this issue.

@msftclas
Copy link

msftclas commented May 4, 2019

CLA assistant check
All CLA requirements met.

@aeschli aeschli self-requested a review June 12, 2019 10:01
@aeschli aeschli merged commit 1f1a416 into microsoft:master Jun 12, 2019
@aeschli
Copy link
Collaborator

aeschli commented Jun 12, 2019

Thanks @parzh . I modified the RP a bit in order to keep the changes minimal. I hope that's ok for you.

@aeschli aeschli added this to the June 2019 milestone Jun 12, 2019
@parzh
Copy link
Author

parzh commented Jun 12, 2019

@aeschli Thanks for the merge! Yes, that's fine.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants