Stacking box-shadows in multiple css selectors

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.

• Michael Benjamin: Can you post a simple demo, maybe in jsfiddle or codepen?

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>

• The Oddler: That's perfect! Thanks :D