CSS spec: properties specified multiple times

Question

Disclaimer: I know this is a bad idea and I'd never do it myself, but I'm trying to figure out what the CSS spec says.

If I have CSS like:

span { color: 'red'; color: 'green'; }

which one wins? The first one, the last one, a random one picked by my browser?

And related, if they're redundant but not equivalent, like:

span { border-top-width: 10px; border-width: 5px; }

does this parse exactly as if I'd said:

span { border-top-width: 10px; border-top-width: 5px; border-right-width: 5px; border-bottom-width: 5px; border-left-width: 5px; }

and then the previous rule applies? Or is there a different rule that applies with redundant-but-not-equivalent CSS properties like this?

I've been digging through the CSS spec and I can't seem to find anything that directly applies here.

thanks!

Dawson · Accepted Answer · 2015-12-17T19:36:48.183

3

It cascades to the last valid declaration. So - color:'green' would win.

Again, cascade wins. border-top-width would otherwise be styled independently, but border-width: would win to apply 5px to All.

edited Dec 17 '15 at 19:36

answered Dec 17 '15 at 19:35

Dawson

Agreed. For rules of equal specificity, the farthest one down the page wins – Sam Jacobs Dec 17 '15 at 19:36

score 1 · Answer 2 · edited May 23 '17 at 12:30

The last one always wins...

There are a few rules about priorities that everyone should know...

These are priorities that css follows:

And then the last one declared on the file.

Hope it helps.

2 Answers2