How to set active when using important

See more:

CSS

I have a micro feed were a user can like like a comment and not like a comment

.ms-microfeed-button.ms-textSmall.ms-secondaryCommandLink.ms-microfeed-footerButton:first-of-type {
    background-image:url('dont-like.png') !important;
    background-repeat:no-repeat
    font-size:0px;
    height:20px !important;
    width:20px !important;
    display: inline-block;
}

This code makes the like text "like" to display a icon istead of text, the like icon here is black i most use !important on that css tagg to override the existing text, then when i click the like icon i want to change the icon to a red icon , but my first css in the top still overides my second css so my red like icon only displays in 1 second,

.ms-microfeed-button.ms-textSmall.ms-secondaryCommandLink.ms-microfeed-footerButton:active {

        background-image:url('likes.png') !important;
    background-repeat:no-repeat!important;
    font-size:0px !important;
    height:20px !important;
    width:20px !important;
    display: inline-block;
}