Question

I know I can set two box-shadows to the same element this way:

box-shadow: inset 0 2px 0px #dcffa6,  0 2px 5px #000;

I am assigning css properties to a class in different parts of the page, so I wonder if it is possible to accomplish the same, assigning box-shadow two times. Something like:

box-shadow: inset 0 2px 0px #dcffa6;
box-shadow:0 2px 5px #000;

This however doesn’t work, the second box-shadow overrides the first one.

Thanks.

EDIT:

I also tried applying two classes to the same element, with no luck: http://jsfiddle.net/DQvyw/

EDIT 2:

Not a real solution, but I ended up doing this: http://jsfiddle.net/DQvyw/1/

Answer 1

You can’t do this with two separate declarations — in CSS, when you define two values for the same rule, the latter declaration overrides the former. However, with JavaScript, you can concatenate the second value instead of replacing the old one with it. Something like:

var el = document.getElementsByClassName("your_class_name");
var n = el.length;
for(var i = 0; i < n; i ++) {
    var cur = el[i];
    cur.style.boxShadow += ", 0 2px 5px #000000"; //notice the comma in the beginning
}

I am not sure this is what you want, but I hope that helped you in any manner!