Search code examples
htmlcssbuttonpseudo-class

Color not working on active button

I am trying to get the css font color to change to white when a button is pressed, however the only way I can currently do this is if I use !important and force the color to change. Is there a way to do this without using !important? Here is my code:

Currently the button font color changes to the background color of .modal-close, unless I use !important to force it to change to white. Is there any way to make this work properly without using !important? Any help would be appreciated.

.modal-close {
    width: 30px;
    height: 30px;
    border-radius:30px;
    border: 1px solid $gray-light;
    font-size: 14px;
    font-weight: 200;
}
.modal-close-x {
    position: relative;
    right: 3px;
    bottom: 4px;
}
.modal-close:focus {
    outline: 0;
}
.modal-close:active {
    background: #41b97c;
    color: #ffffff; /* want this to work without !important */
    border: 1px solid #41b97c;
}
.modal-close:hover {
    border: 1px solid #41b97c;
    color: #41b97c;
}
<button  class="modal-close pull-right" aria-label="Close" >
    <span class="modal-close-x" aria-hidden="true">&times;</span>
</button>

Solution

  • This is a matter of selectors ordering (which should ALWAYS follow LOVE and HATE) given CSS specificity are the same the cascade part of CSS will take care of it and make the last rule override the priors.

    How LOVE and HATE should be ordered:

    a:link
a:visited
a:hover /* Note that `a:focus` is the same order level as `a:hover` */
a:active

    so in your case, should be:

    .modal-close:focus {}
.modal-close:hover {}
.modal-close:active {}