Stacking box-shadows in multiple css selectors - css

Question

I'm making a little game in Eml, and I'm using css for visualization.
I have a grid with cells, all get the class cell.
However there is also one that has the class selected with obvious use.
Now, to visualize this to the user I have the following css:
.game .cell:hover {
box-shadow: inset 0 0 5px rgba(200, 50, 50, 1);
}
.game .cell.selected {
box-shadow: 0 0 5px rgba(50, 50, 200, 1);
}
So this adds a shadow to the cell you are currently hovering over, and a different one if the cell is selected.
However when you hover over the currently selected one, it just shows the "selected-shadow", not both.
A simple fix of course is to add this:
.game .cell.selected:hover {
box-shadow: 0 0 5px rgba(50, 50, 200, 1), inset 0 0 5px rgba(200, 50, 50, 1);
}
Then it works for both, so that's great.
However it's not perfect.
What if I decide to change the hover-effect, then I'll also have to change the selected+hover effect.
So there's duplicated data, and my question is: can the same be achieved without duplicating data?
Note: I'm wondering about a pure css solution, no extra libraries such as SASS or similar if possible.

Answer 1

You can do a little trick and use a pseudo element:
.cell {
width: 100px;
height: 100px;
display: inline-block;
border: solid 1px;
position: relative;
}
.cell:hover {
box-shadow: inset 0 0 5px rgba(200, 50, 50, 1);
}
.cell.selected:after {
content: "";
position: absolute;
top: 0px;
right: 0;
bottom: 0;
left: 0;
box-shadow: 0 0 5px rgba(50, 50, 200, 1);
}
<div class="cell"></div>
<div class="cell selected"></div>