Search code examples
htmlcsscss-specificity

CSS specificity calculation and incorrect behavior in browsers

According to my understanding of CSS specificity calculations, the color of h1 below should be red, but the browsers show it in blue font. Any idea what I am missing?

#contact h1 {color:blue;}         /* specificity: 0101 */
body#contact div p h1 {color:red;}  /* specificity: 0104 */
<body id="contact">
    <div>
        <p>
            <h1>Example</h1>
        </p>
    </div>
</body>

Solution

  • You cannot put an <h1> tag inside a <p> tag. Browsers know this and correct it; if you inspect the markdown of a page with this code, you'll see the browser is automatically closing the <p> tag before the <h1> tag is opened. So the browser is actually presenting your code as:

    <body id="contact">
    <div>
        <p></p>
        <h1>Example</h1>
        <p></p>
    </div>
</body>

    And because of this, it means your <h1> is not actually a descendant of <p>. Therefore, your selector of body#contact div p h1 doesn't affect anything.

    See Mozilla Developer Network for a list of what elements are allowed inside <p> elements.