jonkemp / jonkemp/inline-css

Selector specificity not working for !important rules

Open
#32 8 comments 0 reactions 0 assignees View on GitHub
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))
// '

test

'
inlineCss('a{color: black!important} p a {color: red!important}

test', {url: '/'}).then(s=>console.log(s))
// '

test

'
```

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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.