Inheritance from the global selector - html

Question

* {
color: yellow
}
.outermost {
color: blue
}
.middle {
color: red
}
<div class="outermost">
<div class="middle">
<p>Some Text</p>
</div>
</div>
I expect the color of <p>Some Text </p> to be red because <div class="middle"> is its parent. However, the color ends up as yellow. This seems counter-intuitive because the global selector is less specific than the parent container. Why does the p element inherit from global, and how can it be changed so that it inherits from the parent container?

Answer 1

As #j08691 notes in his comment, the universal selector * has no effect on specificity:
* {
color: yellow;
}
.middle {
color: red;
}
<div class="middle">
<p>Some Text</p>
</div>
If you'd like the specificity to operate under normal effects change the * to body:
body {
color: yellow;
}
.middle {
color: red;
}
<div class="middle">
<p>Some Text</p>
</div>

Answer 2

You're conflating inheritance with specificity. Those aren't the same thing; they're totally unrelated concepts in CSS.
It's true that the global selector has a much lower specificity than the .middle class selector, but that's irrelevant because the .middle selector isn't targeting your p element; it's targeting the p element's parent.
Normally that would be sufficient to make p use red text, because, by default, p has its color property set to the special value called inherit, which causes it to inherit its color from it's parent element. But p isn't using the default value (inherit) for its color property, because you have a matching rule telling explicitly to use yellow instead:
* {
color: yellow;
}
Inheritance doesn't even come into play here, because your p element isn't set to inherit from it's parent in the first place.
You can override that behavior using a selector with a higher specificity that targets the element containing your text (not just one of its ancestors) explicitly telling it to inherit from its parent:
* {
color: yellow;
}
.outermost {
color: blue;
}
.middle {
color: red;
}
.middle > p {
color: inherit; // This overrides the rule defined by the global selector above
}
<div class="outermost">
<div class="middle">
<p>Some Text</p>
</div>
</div>
Or alternately, you could just stop using the global selector and instead rely on inheritance to set the text color for most of your elements:
body {
color: yellow;
}
.outermost {
color: blue;
}
.middle {
color: red;
}
<div class="outermost">
<div class="middle">
<p>Some Text</p>
</div>
</div>
Note that using the global selector for this sort of thing is usually discouraged anyway, for numerous reasons.
To help you better understand why your current code isn't working, here's essentially what it's doing:
<div style="color:blue;"> <!-- Matches * and .outermost. Result: Blue -->
<div style="color:red;"> <!-- Matches * and .middle. Result: Red -->
<p style="color:yellow;">Some Text</p> <!-- Matches *. Result: yellow -->
</div>
</div>

Answer 3

This is how you would target the font inside the "middle" class https://jsfiddle.net/DIRTY_SMITH/cfckvvzw/3/
.middle > p {
color: red
}