Search code examples
htmlcsscss-specificity

Confused about CSS specificity

Given the following CSS and HTML, Can someone please explain why the header in the article tag is red, I thought it should be blue because they both have the same weight but the article style comes after the h4 style so should override the h4 style.

<html>
<head>
   <title></title>

   <style>
       h4
       {
            color:red;
       }

       article
       {
            color:blue;
       }
    </style>
</head>
<body>
    <article>
        <h4>Latest News</h4>
    </article>
</body>
</html>
Solution

  • An easier to understand approach:

    <h4> is closer to the text than <article>, and both are element selector, thus <h4> overrides <article>.