Konrad Viltersten Konrad Viltersten - 7 months ago 31
HTML Question

Confused by div getting styles only when control is specified

I've got the style below (the file is linked and the color shows - no linkage issues).

div.hazoo {
background: aquamarine;
}


However, when I remove the controler's specification and only use the style as if I mean any control on the page, the color gets retarded back to the default black (we're talking navbar in Bootstraps's theme, under MVC). I've even tried without the dot in the beginning - same result, of course.

.hazoo {
background: aquamarine;
}


The markup is the very, very defaulty one from the top of the _Layout.cshtml file, as shown below.

<body>
<div class="navbar navbar-inverse navbar-static-top hazoo">
...
</div>
</body>


What am I missing? Or am I mistaken in the belief that the the style assignment can be done to a general component using that syntax? Based on my previous experience, I can but Bootstrap has surprised me a few time the last few weeks, so I'm full of respect for my ignorance (if it's got to do with it to begin with, I'm uncertain).

Answer

See W3's selector specifity docs and you should find out why in one case background-color is overwritten or not. there is no problem to increase a selector weight for a specific match

It is a matter of selector weight (specifity) or position within the style sheet

  • twice a selector of same weight/specifity: last one updates the previous

  • 2 or more selector of different weight/specifity: the one with the most weight/specifity updates others. seems to be your case

W3C examples:

    *               /* a=0 b=0 c=0 -> specificity =   0 */
    LI              /* a=0 b=0 c=1 -> specificity =   1 */
    UL LI           /* a=0 b=0 c=2 -> specificity =   2 */
    UL OL+LI        /* a=0 b=0 c=3 -> specificity =   3 */
    H1 + *[REL=up]  /* a=0 b=1 c=1 -> specificity =  11 */
    UL OL LI.red    /* a=0 b=1 c=3 -> specificity =  13 */
    LI.red.level    /* a=0 b=2 c=1 -> specificity =  21 */
    #x34y           /* a=1 b=0 c=0 -> specificity = 100 */
    #s12:not(FOO)   /* a=1 b=0 c=1 -> specificity = 101 */