CSS Universal selector (*) specificity

Question

I'm trying to figure out why .x has higher specificity than *.x when the latter is expected to win.

Isn't *.x supposed to have a specificty of 0-0-1-1 (1 class, 1 tag) while .x is just a single class 0-0-1-0?

Consider the following basic code:

*.x { color: blue; }

.x { color: red }

<p class="x">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, nam.</p>

It should be blue. To demonstrate an expected behaviour, I replaced * with another element (p):

p.x { color: blue; }

.x { color: red }

<p class="x">This time it works.</p>

Answer 1

The universal selector (*) has no effect on specifity, therefore the latter selector's styles will be the ones that are applied.

An asterisk (*) is the universal selector for CSS. It matches a single element of any type. Omitting the asterisk with simple selectors has the same effect. For instance, *.warning and .warning are considered equal.