CODEWITHSUNDEEP
htmlcsscss-specificity
MegaMatt
MegaMatt

Reputation: 23793

Nested div not being given parent's style, using * style instead

I'm not understanding why the innermost nested div below isn't the same size as the #smaller-size. It's a direct descendant. Is it because the global * style is more specific? This is really gut-punching my page. What am I missing? Thanks!

* { font-size: 15pt; }
#smaller-size { font-size: 0.8em; }
<div>
    This should be the size specified by * (and it is)
    <div id="smaller-size">
        This should be the smaller size (and it is)
        <div>
            This is nested in #smaller-size, so it should also be smaller (but it's not!)
        </div>
    </div>
</div>

Upvotes: 2

Views: 1088

Answers (3)

Gordo
Gordo

Reputation: 196

The specificity of the "*" selector is the lowest possible (0,0,0,0), but it applies to every element applicable, so every div will be:

* { font-size: 15pt; }

By the time you are setting the new specificity with the # selector:

#smaller-size { font-size: 0.8em; }

Only the element with the corresponding id selector will have higher specificity than the rest, affected by *, which are all of them. Creating in this particular element (0,1,0,0) especificity value. This id applies to that particular element only.

If for example you stablish something like:

#smaller-size>div { font-size: 0.2em }

Then all elements div under id smaller-size will have higher specificity than the ones affected by just *

Creating something like that:

<div> -- specificity (0,0,0,0) = 0
  <div id="smaller-size"> -- specificity (0,1,0,0) = 100
    <div> -- specificity (0,1,0,1) = 101
    </div>
  </div>
</div>

With this logic:

* { font-size: 15pt; }
#smaller-size { font-size: 0.8em; }
#smaller-size>div { font-size: 0.7em; }
#smaller-size>.smaller { font-size: 0.6em; }
<div>
    specificity of this element (0,0,0,0) = 0
    <div id="smaller-size">
        specificity of this element (0,1,0,0) = 100
        <div>
            specificity of this element (0,1,0,1) = 101
        </div>
        <div class="smaller">
            specificity of this element (0,1,1,1) = 111
        </div>
        <div class="smaller" style="font-size: 0.5em;">
            specificity of this element (1,1,1,1) = 1111
        </div>
        <p>
            specificity of this element (0,0,0,0) = 0
        </p>
    </div>
</div>

Here is a very good post explaining how specificity works.

Upvotes: 2

Quentin
Quentin

Reputation: 944536

Is it because the global * style is more specific?

No. It is because it matches the element and #smaller-size does not.

Specificity only matters when both selectors match the same element.

If you didn't have * { font-size: 15pt; } then the inner div would have the default value for font-size which will be something along the lines of 100% (i.e. the same size as the parent element).

You should probably just set the font size on body and let inheritance take case of the rest. Although there are a few gotchas:

  • Form controls don't default to 100% so you might want to explicitly set the size for input elements and the like
  • In Quirks mode fonts may not inherit into tables by default, so ensure you have a Doctype that triggers Standards mode
  • pt is a unit designed for physical media. It does not get rendered accurately on screen. Consider using a different unit (like pixels).

Upvotes: 1

Zoltan Febert
Zoltan Febert

Reputation: 1073

Yes, it is because your global * style. Your nested div has no class or id, and the browser tries to find the first applicable style element, and it is the *.

Upvotes: 0

Related Questions