How is the universal selector working here?

Question

* { font-weight: normal; }
#stockTicker { font: 12px Verdana; }
.corpName { font-weight: bold; }
.stockUp { color: red; }

<div id="section">
   NYS: <span class="corpName"><span class="stockUp">GE</span></span> +1.0 ...
</div>

Why does universal selector get the last say here when .corpName comes later in the styles and also has higher specificity?

JSFiddle here: http://jsfiddle.net/zackgao/2q9Wh/

Answer 1

CSS specifies that the assigned value of a property comes from the cascade, inherited, or the property's initial value, in that priority order (CSS spec).

Since * is applied to the <span class="stockUp"> during the cascade the inherited value isn't considered.

Text directly inside the <span class="corpName"> element would be styled as you'd expect since the corpName class would beat out the * during the cascade.