How to force span to use parent font-family in CSS

Question

When HTML span has CSS font-family, I can't force it to use parent font-family

.Parent {
  font-family: tahoma !important;
}

.Child {
  font-family: cursive, geneva;
}

<div class="Parent">
  <span class="Child">Text</span>
</div>

Why span don't use parent font-family?

How can I make this work?

Fe

remove !important from parent. – Discern

Answer 1

You could select all the children elements using .parent * and then set font-family to inherit. This will effectively override the child element font and force all children elements to inherit the value of whatever the closest parent element's font is.

.parent {
  font-family: tahoma;
}
.child {
  font-family: cursive, geneva;
}
.parent * {
  font-family: inherit;
}

<div class="parent">
  <span class="child">Text</span>
</div>

And if you only want to target the .child element, you would obviously change the selector to .parent .child.

Depending on what you're trying to achieve, it's also worth mentioning that you can use the direct child selector, >, in order to only target direct children: .parent > *.

.parent {
  font-family: tahoma;
}
.descendant {
  font-family: cursive, geneva;
}
.parent > * {
  font-family: inherit;
}

<div class="parent">
  <span class="descendant">Direct child. <em class="descendant">Not a direct child</em></span>
</div>

Mckinney

You sure? I mean its right that if we redefine a property in CSS with the same selector it won't be overriden with the latest value. But about redefinning a property with another selector like 'parent *' would it take effect while we have direct class selector '.child' – Gaylordgaylussac

Example which should work on systems that does not have tahoma installed, and displays the different between a child inside and outside the parent class: jsfiddle.net/vmzzx1a4/4 – Siana

Please also note that this fix does not work on elements which has font set directly via the style attribute, at least not in my browser (Chrome 54.0.2840.59). !important will allow inline style to be overriden: #16813720 – Siana

Answer 2

CSS priority goes something like this:

1. Rules on this element marked with !important
2. High to low rule scoring based on the number of ID tags, classes, etc., for rules applying to this element.
3. The browser's default user agent styles.
4. For rules that are inherited by default, like font-family (but not others like background-color), the current value of the parent(s).

What your child node is getting is not number 1. in that list, but 4. The !important flag is making sure that the parent has that font set, but that importance does not carry over to children. You could set font-family: inherit !important if you really, really want every element to take its parent font.

Word of advice, though: Only use !important in extreme situations. You can often one-up another CSS rule's priority in a much more gentle way.

Jonell