CSS Style precedence Options

[poporacer]

I thought that styles that are more specific would take priority? I have the following code that does not seem to be following those rules:

CODE

<style type="text/css">

    * {
        box-sizing: border-box;
        font-family: Ubuntu, Helvetica, Arial, sans-serif;
        color: red;
        text-align: center;
    }

div{
        font-size: 11px;
        line-height: 1.5;
        text-align: center;
}

#innerRequestSuccessful{
        background-color: #009C00;
        margin: auto;
        width: 80%;
        color: #08c7f7;
        text-align: center;
        font-size: 24px;
        font-weight: bold;
}
</style>

<div id="requestSuccessful" style="display: block">
    <div id="innerRequestSuccessful">
        <h3>Successfully Added!</h3>
    </div>
</div>

I would think that because id is more specific than the * tag that it would take priority. But the text color in the <div id="innerRequestSuccessful"> shows red, even an inline style doesn't show the color specified. What am I missing?

[pandy]

Yes, the universal selector is the lowest of the lowest.

The problem is that you expect the H3 to inherit the color from the DIV it's in. Which it would, wasn't it for the * rule. Thing is, while the universal selector has a specificity of 0, as low as it gets, an inherited property has no specificity at all, it isn't even in the game. A declaration that matches directly will take precedence over a property that's inherited. And since the universal selector matches all and everything it matches your H3, so it wins.

Hope I managed to put that in a half understandable way. This is a stumble stone, I think. That inherited properties aren't in the game at all isn't mentioned in the section about specificity in the CSS2.1 spec (don't know about 3). Rightly so, I assume the w3c thinks. It isn't in the game and it isn't a selector so it has nothing there to do. But a little footnote would have been helpful. It's mentioned somewhere, but god knows where. It's very easy to make the assumption you did. Most of us probably have at some point.

[poporacer]

Thanks! Yes, it makes sense.
I need to get rid of the <h3> tag and format the font/style in the <div id="innerRequestSuccessful"> style

[pandy]

No, use the id directly with H3 instead. Then the id will "win". The DIV isn't needed at all if you don't plan to put more stuff into it.