Both styles are being applied. You are correct that .footer-link:hover
is more specific than a:hover
, but what you are seeing is a combination of both style definitions. This is the cascading part of cascading style sheets.
Your a
and a:hover
styles are applied first, then the higher specificity .footer-link
and .footer-link:hover
styles are applied afterwards, and any of their explicitly defined properties (such as background
) overwrite the previous definitions.
However, since you don't specify the link color
in the .footer-link:hover
style, it inherits the property from a:hover
instead.
The specificity here is working exactly as it's supposed to, you're just a bit confused about how inheritance and specificity work!