CSS Specificity and Inheritance

Question

Given the following code:

* {
  font-size: 18px;
}

.container {
  font-size: 50%;
}

<div class="container">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate explicabo fugiat laborum minus ullam? Amet delectus facilis id quam temporibus.
  </p>
</div>

The result is that the <p> tag has 18px font-size applied. But shouldn't every element that is inside of the div container inherit the font-size I apply to it? Regardless of the * selector applying the font-size to the <p> tag, because a tag is only worth 1 point and a class is worth 10 points?

The * applies the font-size: 18px; directly to the child <p> element. A style directly applied to a child element will take precedent over their inherited styles. If you wanted the .container children to be an exception, you could do .container * { font-size: 50% } or .container p { font-size: 50%; }, .container { font-size: 50%; } .container p { font-size: inherit; }, etc. Or even use an !important... — Tyler Roper
– Tyler Roper, Commented May 1, 2017 at 14:55
To do this you need to add this: p{font-size: inherit;} This overrides the style applied by * — Farzin Kanzi
– Farzin Kanzi, Commented May 1, 2017 at 14:56
So i should be more careful with the * selector or i have to redefine everything later on. I will use .container * {rule} Thanks you two. :) — veteri
– veteri, Commented May 1, 2017 at 14:57
Correct. Otherwise you'll run into tons of overlap, or you'll be throwing !important attributes around like crazy, which is a generally sloppy practice. — Tyler Roper
– Tyler Roper, Commented May 1, 2017 at 14:59

BoltClock · Accepted Answer · 2017-05-01 17:09:43Z

The .container rule doesn't match the p element. So specificity is irrelevant here. Inheritance and specificity are separate concepts and the only time they interact is when more specific/less specific rules contain declarations with inherit. That is not the case here.

As far as the p element is concerned, only the * rule applies, and the * contains its own font-size declaration, and so the specified font size follows that declaration.

If the * rule didn't have its own font-size declaration, then the p element would inherit from .container.

If you want descendants of .container to take after its font size, you will need an additional .container * rule. Be very careful with the inherit keyword when it comes to relative values, though — you probably meant to keep all descendants the same size, so 1em or 100% is more appropriate here than inherit:

* {
  font-size: 18px;
}

.container {
  font-size: 50%;
}

.container * {
  font-size: 1em;
}

<div class="container">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate explicabo fugiat laborum minus ullam? Amet delectus facilis id quam temporibus.
  </p>
</div>

quirimmo · Accepted Answer · 2017-05-01 15:00:03Z

0

The * takes precedence over the parent selector as you did for container. You should be able to reach your point adding to the p

font-size: inherit;

Or also this should work:

.container * {
    font-size: inherit;
}

answered May 1, 2017 at 15:00

quirimmo

10k3 gold badges33 silver badges46 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:09:57Z

0

The star * is the universal selector for CSS. It matches a single element of any type. Please see this link, has a good explanation (why) is the CSS star selector considered harmful?

edited May 23, 2017 at 12:09

CommunityBot

11 silver badge

answered May 1, 2017 at 15:09

Sky

315 bronze badges

Collectives™ on Stack Overflow

CSS Specificity and Inheritance

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related