How to I avoid that the CSS rule * {} trump .a .b {}?

Question

Using MDC I get the following structure:

<div class="mdc-fab">
  <span class="mdc-fab__icon">
    <i>x</i>
  </span>
</div>

In the CSS file from MDC there is the following rule:

.mdc-fab .mdc-fab__icon {
    font-size: 24px;
}

However in my own CSS-file I have this rule that overrides the rule above:

* {
    font-size: 1rem;
}

I want that rule to ensure that no font-size is less than 16px. However here it overrides the rule from MDC which is not what I want.

Can I rewrite my rule in some way?

EDIT: Since there seem to be some confusion, please look at this Codepen: https://codepen.io/lborgman/pen/RwNGzmP

And please observe that I can not change the MDC rule.

Yes apply font size to body instead of */everything on the page. — Nathaniel Flick, Dec 16 '19 at 02:55
Not really. There's nothing like `min-font-size`. (Despite the answers, this isn't really about specificity.) — Ouroborus, Dec 16 '19 at 03:07
@Leo "You can't" is a valid answer. Whether you like it or not doesn't matter. There's simply no way to guarentee a minimum font size with just CSS without manually ensuring your CSS doesn't cause font sizes to fall below your required minimum. (You might consider that you may be doing it wrong. Generally, you don't typically want to use `*` for inherited styles like `font-size`. Instead, use `body` and allow inheritance to do its thing.) — Ouroborus, Dec 16 '19 at 03:15
@Ouroborus Yes, there is. If you want to avoid the strange values your web browser may set. That is what I avoids with the rule I am using. (Instead of filing another bug report, I am a bit lazy.) — Leo, Dec 16 '19 at 03:22

score 0 · Answer 1 · answered Dec 16 '19 at 02:58

0

.mdc-fab .mdc-fab__icon {
    font-size: 1rem;
}

Specificity wins so you will need to be specific.

answered Dec 16 '19 at 02:58

Adrian Brand

15,308
3
24
46

Thanks, I thought so, but * wins here. – Leo Dec 16 '19 at 03:08

score 0 · Answer 2 · answered Dec 16 '19 at 02:58

0

You are mistaken in that your selector of * overrides .mdc-fab .mdc-fab__icon; the latter will override the former. This is a problem of specificity.

In order to overcome this, you'll want to increase the specificity of your selector so that it is either higher than that of MDC or equal to it and referenced later.

It depends on the specific element you need to target, and there are numerous ways to achieve this, but one approach would be to target the <i> with:

.mdc-fab .mdc-fab__icon i {
  font-size: 1rem;
}

Or alternatively make use of the child combinator > with:

.mdc-fab > .mdc-fab__icon {
  font-size: 1rem;
}

To target the <span> itself.

If you only want to have to declare it once, you can make use of the !important declaration, though this is generally frowned upon, as it carried the highest level of specificity (making it very difficult to override). If, however, you are certain that you want to apply this font-size to all elements on your page, then it will be the easiest option:

* {
  font-size: 1rem !important;
}

answered Dec 16 '19 at 02:58

Obsidian Age

36,816
9
39
58

1

Be careful with !important, used too often it destroys a CCS project. It is frowned upon for very good reasons. – Adrian Brand Dec 16 '19 at 03:04
Yes, though I do draw attention to that caveat in my answer. – Obsidian Age Dec 16 '19 at 03:07
Thanks, but I can not change the MDC rule. – Leo Dec 16 '19 at 03:07
2

@Leo - I'm not stating that you should change the MDC rule -- rather create a *similar* rule of your own :) – Obsidian Age Dec 16 '19 at 03:08
You put an override in your own CSS, you don't change the mdc rule. – Adrian Brand Dec 16 '19 at 03:08
@ObsidianAge Yes, I could do that, but that is not what I want. – Leo Dec 16 '19 at 03:09
2

It's what you need to do, put a rule in that is specific enough to override the font size. – Adrian Brand Dec 16 '19 at 03:09
@AdrianBrand I hoped you had another answer. The reason I do not want to do that is that there can be more cases like that in MDC. I do not understand how they think we are supposed to handle it. – Leo Dec 16 '19 at 03:12
@Leo - I'm not familiar with MDC (and can't even find reference to it on Google), but I know that the whole *point* of using frameworks in general is that you want to stick with their 'style' of things like fonts and spacings. If you're not happy with their fonts, then you may want to consider if you should be using that framework at all. – Obsidian Age Dec 16 '19 at 03:13
@ObsidianAge MDC = Material Design Components, from Google. (https://github.com/material-components/material-components-web) – Leo Dec 16 '19 at 03:17

How to I avoid that the CSS rule * {} trump .a .b {}?

2 Answers2

Linked