CODEWITHSUNDEEP
css
GMchris
GMchris

Reputation: 5658

Can I prevent a style rule from being inherited?

I have a global font-size in place, and an element which uses a different one.

body {
  font-size: 16px;
}

.parent {
  font-size: 14px;
}

Inside the .parent element I have several children, which I'd like to use the font-size: 16px from the body. Is there a way to "skip" an inheritable declaration. Something like:

font-size: 14px !dont-propagate;

Would be pretty nice to have. Of course I'm aware of the workarounds such as styling the children to have font-size: 16px, or putting only the text parts of .parent into their own container and giving that the smaller font size. Think of this trivial example of something much bigger, which makes those options less desirable.

Upvotes: 0

Views: 672

Answers (1)

Quentin
Quentin

Reputation: 944526

No.

If they didn't inherit, then they wouldn't have any value at all.

There is no way to inherit from an element other than the parent element.

If you want them to have a value other than inherit, 100%, 1em or whatever their default is: You need to specify it explicitly.

You can use the rem unit to take the font size from the root element, so you could say:

html { font-size: 16px; }
* { font-size: 1rem; }
.parent { font-size: 14px; }

Note that this might have side effects you dislike such as changing the font size of <input> and <small> elements.

Upvotes: 2

Related Questions