0

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?

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
veteri
  • 101
  • 8
  • 2
    The `*` applies the `font-size: 18px;` directly to the child `

    ` 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 May 01 '17 at 14:55
  • To do this you need to add this: `p{font-size: inherit;}` This overrides the style applied by `*` – Farzin Kanzi May 01 '17 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 May 01 '17 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 May 01 '17 at 14:59

3 Answers3

1

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>
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
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;
}
quirimmo
  • 9,800
  • 3
  • 30
  • 45
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?

Community
  • 1
  • 1
Sky
  • 31
  • 5