background-color not overwriting fully defined background property

Question

I am making a toolbar menu of three elements, which should have the same styling except for different background images that serve as icons.

HTML:

<div id="menu-handheld">
    <a href="page.php?stuff=things" id="menu-handheld-tab-start">Start</a>
    <a href="page.php?stuff=things" id="menu-handheld-tab-trends">Trends</a>
    <a href="page.php?stuff=things" id="menu-handheld-tab-recent">Recent</a>
</div>

CSS:

#menu-handheld {
    position: fixed;
    width: 100%;
    height: 3.8rem;
    bottom: 0;
    z-index: 100;
}

#menu-handheld-tab-start { background: rgb(0, 51, 51) no-repeat 50% 0.5rem/2rem url(img/icons/start.svg) }
#menu-handheld-tab-trends { background: rgb(0, 51, 51) no-repeat 50% 0.5rem/2rem url(img/icons/trends.svg) }
#menu-handheld-tab-recent { background: rgb(0, 51, 51) no-repeat 50% 0.5rem/2rem url(img/icons/recent.svg) }

[id|=menu-handheld-tab], [id|=menu-handheld-tab]:visited { /* common CSS */
    display: block;
    float: left;
    box-sizing: border-box;
    width: 33.33333%;
    height: 100%;
    padding-top: 2.5rem;
    color: rgb(102, 153, 153);
    font-size: 1rem;
    font-family: treme-extra-light;
    text-decoration: none;
    text-align: center;
    transition: background 0.3s ease;
}

[id|=menu-handheld-tab]:active, [id|=menu-handheld-tab]:hover {
    background-color: rgb(102, 153, 153); /* this does not work */
    color: rgb(0, 51, 51); /* this works fine */
}

As I commented in the code, the :hover/:active transition works fine on the text color, but not at all on the background-color. I believe this is an issue with the fully written out background properties I am using for each element separately, because I had the same problem when I tried to define the background property in the common CSS and only use background-image in the separate selectors.

What am I doing wrong here? Why does background-color, or background-anything for that matter, fail to overwrite the background property? I realize I may fix my problem by defining another set of three #menu-handheld-tab-stuff {} selectors and writing out a new full background definition, but that's not a solution.

score 0 · Accepted Answer · answered Aug 08 '17 at 19:06

The color declaration takes effect because there are no existing color declarations to override.

The background-color declaration does not take effect because ID selectors are more specific than attribute selectors and pseudo-classes combined. This is because an attribute selector is always less specific than an ID selector, even when that attribute selector is specific to the id attribute. Each of your rules containing an ID selector therefore retains its background shorthand declaration, including its color value.

Normally, working around this would involve specificity hacks or even using !important, but in this specific case, you should be able to get away with adding #menu-handheld to your selectors (and, optionally, replacing the attribute selectors with the more simple a type selectors since there are no other children of #menu-handheld):

#menu-handheld a:active, #menu-handheld a:hover {
    background-color: rgb(102, 153, 153);
    color: rgb(0, 51, 51);
}

(While you're at it, for the sake of consistency I recommend doing the same with the previous rule.)

background-color not overwriting fully defined background property

1 Answers1