Confused about CSS specificity

StackOverflow https://stackoverflow.com/questions/22090695

  •  18-10-2022
  •  | 
  •  

Pregunta

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>
¿Fue útil?

Solución 2

An easier to understand approach:

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

Otros consejos

Specificity has nothing to do with this. In the code, there is only one rule set sets color on the h4 element, so that setting is applied.

If that rule were omitted, then h4 would inherit color from its parent. But inheritance does not take place, for a property of an element, when any style sheet sets a value for that property of that element. Even here, specificity plays no role.

Since there is a collision between the article's blue property and the H4 red property, the web browser will always choose the "closest" property.
So in this case, since the text is inside H4 which has the red property, it will show the text in red, but if you add some other text outside the H4 tag but inside the article tag, the text will be blue.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top