Why does em override p for font family?

Question

Consider the following CSS:

* {  font-family: Gill Sans, Verdana, Arial, Helvetica, Sans-Serif}

p {  font-family: Courier; }

And then this markup...

<p>Hi there. So <em>very</em> pleased to make your acquaintance.</p>

Why does the <em> display in Gill Sans? Or rather, why does the wildcard override the <p>. I guess I can see -some- logic in this if every tag has the same 'weight', but it still seems like a 'bug' to me intuitively... and it tends to make for more markup for me in that I can't assume that <em> will -only- affect the font-style in a particular way.

In short, is there a way to have 'modifiers' like <em> only operate on specific features?

Answer 1

* matches every element, including the <em> inside the <p>.
The <em> would have inherited the font from the <p>, but the * overrides it.

You should almost never use *.
If you want to apply a global font, set it to body, so that other rules can override it for specific elements and cascade to their descendants.

Answer 2

Assuming only the code presented, the only font-family declaration set on the em element is the one set for *, so it applies. It is then completely irrelevant what font-family may have been set on its parent.

The question “is there a way to have 'modifiers' like <em> only operate on specific features” does not make sense, because <em> is not a modifier and because CSS in general operates on specific features. So if you set a property on an em element, it will apply, unless there is another setting for the element that overrides it. In the given example, there is no conflict of settings: only one rule applies.

Answer 3

I suppose you could modify your css and fix it:

p, p * {  font-family: Courier; }

or use body selector instead of *