0

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.

GMchris
  • 5,439
  • 4
  • 22
  • 40

1 Answers1

2

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.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • Too bad. Seems like it shouldn't be too hard to make inheritance check up the tree until it finds a value it can inherit. – GMchris Jul 06 '16 at 14:00