CODEWITHSUNDEEP
htmlcssfont-family
Mohammad
Mohammad

Reputation: 21499

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

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?

Upvotes: 11

Views: 23856

Answers (2)

Katana314
Katana314

Reputation: 8620

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.

Upvotes: 4

Josh Crozier
Josh Crozier

Reputation: 241248

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>

Upvotes: 19

Related Questions