Priority of properties defined in
tag

Question

I have learned that the universal selector should be the least priority selector. However, in the following code, it turns out that the first line is blue, second line is white, and last line is brown. Since I put class selector as red for the whole div, why aren't all lines brown?

I'm thinking that since they are all matched with class selectors (same priority), the last one defined should take priority, which is the red one, but it is not the case here.

Here is the HTML/CSS code:

<head>
  <style type="text/css">
    .blue {
      color: blue;
    }
    
    * {
      color: whitesmoke;
      font-size: 5mm
    }
    
    .ho {
      color: rgb(181, 194, 40)
    }
    
    .divo {
      border: 5px outset;
      color: brown;
      text-align: center
    }
  </style>
</head>

<body>
  <div class="divo">
    <h1 class="blue"> this is BLUE </h1>
    <h2> this is YELLOW </h2>
    hello
  </div>
</body>

specificity is only relevant when both selector math the same element. Otherwhise you need to consider inheritance too — Temani Afif, Jul 02 '20 at 19:35
It would be helpful if you could use the CSS color `red` in your CSS, or put a comment next to the color you're calling "red" in your CSS. There are people who are color blind, but could still help you. — Heretic Monkey, Jul 02 '20 at 19:36
The second line is `whitesmoke`, not `white`, by the way. And, as far as I can tell, there is nothing that should be colored "red" in your example, only `brown`. — Heretic Monkey, Jul 02 '20 at 19:44

score 0 · Answer 1 · answered Jul 02 '20 at 19:29

0

This is because the universal selector still applies to the <h2>. So while it is indeed of least priority it still assigns a color to the <h2> and thus the <h2> will no longer inherit the color from its parent div.

answered Jul 02 '20 at 19:29

Willem Govaerts

80
7

I see, so childs properties/value pairs > parent's properties/value pairs. In the case if the child tag has no property, then the parent's property will override the default property of child tag. Is this correct? – Hello World Jul 02 '20 at 21:45
Indeed. Only for some css properties of course, stuff like background-image is not inherited for obvious reasons but text color for Example is. – Willem Govaerts Jul 03 '20 at 22:07

Priority of properties defined in tag

1 Answers1

Priority of properties defined in
tag