Is it valid to assign a value twice to the same property within one rule?

Question

Consider this:

h1 { color: red; color: blue }

Or, a more complex example (taken from a SVG file, stroke is twice):

style="fill:none;stroke:#ffffff;stroke-width:20;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke:#555555"

It seems that the answer is “it’s legal, the last assignment wins”, but I’d really like to know: Is there something written in the CSS specification about this topic?

Have you tried validating it? http://jigsaw.w3.org/css-validator/ — Pavel Ronin, Sep 06 '13 at 09:00
@Mirage: I have a program that makes some *small* changes to styles in SVG files, and I’d like to avoid to use a complete CSS parser for this task that seems to be so simple. — Martin, Sep 06 '13 at 09:14

score 14 · Accepted Answer · answered Sep 06 '13 at 09:30

It is valid to have multiple declarations that assign a value to a property so that the assignments apply to the same element, e.g.

h1 { color: red; }
h1 { color: blue }

Combining the declarations in the same rule does not change this.

There is no explicit statement about this in CSS specifications, so it is allowed simply because there is no rule that forbids it. Multiple declarations are very common, though mostly so that they are in different rules, often even in distinct style sheets. But they can also be used within a rule. A common technique is

 p { max-width: 25em; max-width: 60ch }

which means that older browsers that do not recognize the ch unit will use the setting max-width: 25em, whereas in newer browsers, the latter declaration takes effect.

A general rule in CSS is that all other things being equal, latter declaration wins; this is part of the cascade rules. In the case of h1 { color: red; color: blue }, all other things are equal. But in h1 { color: red !important; color: blue }, the first declaration would win.

I found it: [Cascading Order](http://www.w3.org/TR/CSS2/cascade.html#cascading-order): "4. Finally, sort by order specified: if two declarations have the same weight, origin and specificity, the latter specified wins." — Martin, Sep 06 '13 at 10:37

score 5 · Answer 2 · answered Sep 06 '13 at 08:57

5

It is COMPLETELY VALID, h1 { color: red; color: blue } here color will simply be overridden by the next property value i.e blue

enter image description here

Even I use that while my website is in development mode, I often use border: 1px solid #f00; to create a blueprint of the page.

answered Sep 06 '13 at 08:57

Mr. Alien

153,751
34
298
278

#offtop: you should use `outline` instead of `border` in dev, because it don't change size of elements ;) – MarcinJuraszek Sep 06 '13 at 09:02
@MarcinJuraszek I don't like outlines as I can't set them top right bottom left but actually I've pretty good experience in CSS so can get hold of these stuff well :) – Mr. Alien Sep 06 '13 at 09:03
Nice, it obviously is valid. Is there a proof that the second property will override the first? – Martin Sep 06 '13 at 09:15
@Mr.Alien: I am convinced now :) – Martin Sep 06 '13 at 09:21

Is it valid to assign a value twice to the same property within one rule?

2 Answers2

Linked