W3C home > Mailing lists > Public > www-style@w3.org > November 2016

[CSS22] [Section 6.4.2 !important rules] How an user style sheet rule can override an author inline style with !important

From: Gérard Talbot <www-style@gtalbot.org>
Date: Mon, 14 Nov 2016 22:20:37 -0500
To: W3C www-style mailing list <www-style@w3.org>
Cc: Felix Miata <mrmazda@earthlink.net>
Message-ID: <0a0bd0e9f6bcc61643954cf29aa0578a@gtalbot.org>
Hello fellow www-style colleagues,

Let's assume that an H1 element is styled like this:

<h1 style="color: red!important;">Text sample 2</h1>

The origin is author style sheet and the weight (or importance) is 

How is an user style sheet supposed to override or to take precedence 
over such author inline style with !importance then?

The spec states:

Both author and user style sheets may contain "!important" declarations, 
and user "!important" rules override author "!important" rules.
6.4.2 !important rules

and that requirement does not indicate that the user "!important" rule 
has to have an equal or higher specificity.

In the test


author rule is an inline style !important:

<h1 style="color: red!important;">Text sample 2</h1>

while the user style sheet has:

body h1
     color: green!important;

The respective specificity are:

author inline style:  a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0

user style sheet:  a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2

but again, my understanding is specificity should not matter since user 
style sheet for that h1 element has !important. What am I missing here?

For convenience, people can use one of these extensions for that test:

Stylish for Chrome
Latest version: 1.5.2

Stylish for Firefox
Latest version: 2.0.7

userScriptCSS for Chrome
Latest version: 1.4

The "Text sample 2" is red in Firefox 49.0.2, Firefox 53.0a1, Chrome 
54.0.2840.100 when I use one of those extensions.

Received on Tuesday, 15 November 2016 03:21:13 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:09:05 UTC