0

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>
TylerH
  • 20,799
  • 66
  • 75
  • 101
Russell
  • 87
  • 3

1 Answers1

4

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.

TylerH
  • 20,799
  • 66
  • 75
  • 101
  • Thank you. I referred to w3.org and indeed you cannot place any block-level elements inside p element. – Russell Feb 15 '18 at 21:32