elementos especificamente para: pairar substituindo a classe an equivalente por: active
Eu tenho código para ter um plano de fundo com uma cor de fonte atribuída a uma classe e, em seguida, ter classes separadas para alterar a cor em: hover ou: active, mas o estado: active não é acionado, a menos que eu remova a classe específica: hover.CODEPEN
HTML:
<div class="backgroundRed backgroundGreenHover backgroundBlueActive" style="width: 100px; height: 100px;"></div>
CSS:
.backgroundRed, .backgroundRedHover:hover, .backgroundRedActive:active{background:red;}
.backgroundGreen, .backgroundGreenHover:hover, .backgroundGreenActive:active{background:green;}
.backgroundBlue, .backgroundBlueHover:hover, .backgroundBlueActive:active{background:blue;}