複数のCSSセレクタのボックスシャドウを積み重ねて

Question

私はEmlで少しゲームを作っています。私は視覚化のためにCSSを使用しています。 私はセルを持つグリッドを持っています、すべてクラスcellを取得します。 しかし明らかに使用されるクラスselectedを持つものもあります。セルが選択されているのであれば、これはあなたが現在オーバーホバリングされているセル、および異なる1つに影を追加し

.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); 
} 

：私は次のCSSを持っているユーザーにこれを可視化する今

、。 しかし、現在選択されているものの上にマウスを移動すると、「選択された影」だけが表示されます。

もちろんの簡単な修正では、これを追加することです：

.game .cell.selected:hover { 
    box-shadow: 0 0 5px rgba(50, 50, 200, 1), inset 0 0 5px rgba(200, 50, 50, 1); 
} 

は、その後、それは両方のために働くので、それは素晴らしいことです。 しかしそれは完璧ではありません。 ホバー効果を変更する場合は、選択したホバー効果を変更する必要があります。

データが重複しているので、私の質問は次のとおりです。データを複製せずに同じことを達成できますか？

注：可能であれば、純粋なCSSソリューション、SASSなどの余分なライブラリ（など）はありません。です。

Answer 1

あなたは少しトリックを行うと擬似要素を使用することができます。

.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>