Why * CSS selector gets precedence in a simple example

Question

While coding today, I ran into a surprise - element CSS rule with no specificity is being used, even when a rule with higher specificity exists.

In the example below, I would expect:

• Text1 is blue
• Text2 is blue

In reality, Text1 is rendered green.

Can somebody explain the piece of CSS algorithm that makes Text1 get the green color?

* {
  color: green;
}

.blue-text {
  color: blue;
}

<div class="blue-text">
<div>
Text1 <!-- Why is this not blue? -->
</div>
Text2
</div>

Answer 1

The * selector matches the div with the text in it (changing the color value from the default (inherit) to green.

The .blue-text selector does not match the div with the text in it. It only matches the parent div.

Specificity doesn’t matter when the selector doesn’t apply to the element at all.

If you removed the rule with the * selector then the child div would inherit the blue colour from the parent.