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


Tags: html,css,fontfamily

Problem :

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?



Solution :

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>


    CSS Howto..

    How to apply a property only to the submit button

    How to css this little button next to