Add style on top of what it already has - css

Question

Imagine I have this:
.class1 {
color: white;
}
.class2 {
background-color: black;
}
I can use both classes and use both properties the color and the background-color like this:
<p class="class1 class2">text</p>
But now imagine this:
.bottom {
box-shadow: 0 1em red;
}
.top {
box-shadow: 0 -1em red;
}
I want to use both box-shadows without a need to a new class like .bottom-top or .top-bottom. If I use a new class, other people wouldn't know what order the words needed to be unless I created the two classes that do the same thing. Imagine I want a .left and .right classes too, I would need to have at least (2^n)-1 classes (n being the initial number of classes).
I first thought I could use the box-shadow: inherit, <shadow>; so it uses the box-shadow it already has plus the new one but it does not look like it works.
Is it even possible to do this in CSS?
Thanks in advance!

Answer 1

Yep, pretty straightforward. You can't have 2 different box shadow rules as the last one will overrule the first one because of the cascade. You can use .class1.class2 and then override both with an additional box shadow rule see below
/* this is just to make stuff visible */
body {
background-color:skyblue;
}
div {
margin-bottom:3rem;
color:red;
}
/*end*/
/*This is the example*/
.class1 {
color: white;
box-shadow: 0 1em 5px red;
}
.class2 {
background-color: black;
box-shadow: 0 -1em 5px green;
}
/*apply both box shadows when both classes are present */
.class1.class2 {
box-shadow: 0 -1em 5px green, 0 1em 5px red;
}
<div class="class1">Class1</div>
<div class="class2">Class2</div>
<div class="class1 class2">Class12</div>