Selector specificity not working for !important rules
Open
enhancement
help wanted
- Dominant language
- JavaScript
- Stars
- 438
- Forks
- 77
- PR merge metrics
- No merged PRs in 30d
Description
When two selectors match the same element, and both have `!important`, then the selector specificity is ignored and the last rule wins:
``` Javascript
inlineCss('p a {color: red!important} a{color: black!important}
test', {url: '/'}).then(s=>console.log(s))
// '
inlineCss('a{color: black!important} p a {color: red!important}
test', {url: '/'}).then(s=>console.log(s))
// '
```
However for the browsers it’s different. [No matter which rule goes first, if both have !important in them, the more specific wins.](http://embed.plnkr.co/YChmIIhgzanpdgFUeTrK/)
Contributor guide
Assessment
This issue has not been assessed yet.