The “inherit” Value for CSS Properties

on | 5 Comments

In CSS, there are some properties that are naturally inherited from parent to child. This is useful because it prevents needing to define that same property for all children.

For example, the font-size property can be set (as it often is) on the <body> element, and virtually every element that is a child of <body> will inherit that font-size setting.

This prevents your CSS from looking something like this:

body, div, header, footer, p, li {
  font-size: 18px;

So, a number of properties in the CSS specification are able to naturally pass on their values to child elements.

If you want, however, you can force a property in a child element to inherit the value for that property from its parent by using the inherit value. Here’s an example of how you might do this:

div {
  border: solid 2px hotpink;

p {
  border: inherit;

So, if for some strange reason, you wanted all of your paragraphs to inherit the hot pink border of their parent <div> element, then the code above would accomplish this.

Of course, this seems like just another way to skin the cat, as they say. After all, you can just do this:

div, div p {
  border: solid 2px hotpink;

And that would accomplish the same thing. But there could be some instances where the inherit method would work better. Maybe there are other paragraphs with borders set, and so you don’t want those to be affected.

There might also be default styles set by the user agent that you want to override (assuming you’re not already doing so in a CSS reset). Or maybe you want access to an easy way to change the value via JavaScript or jQuery.

Whatever the case, just know that you have the option to use the inherit value. And naturally, if you need to reverse the inheritance, you can either remove the property/value pair, or else set it to “normal” instead.

Browser Support?

The only browsers that don’t support the inherit value are IE6 and IE7 (shocking, I know). With two exceptions: Those browsers do support inherit on the direction and visibility properties. However, since direction and visibility already inherit by default (see below), this seems somewhat pointless.

So, if you aren’t concerned about IE6/7 then you’re safe to use the inherit value on whatever property you want.

Properties That Inherit by Default

As mentioned, some properties already inherit their values from their parent element without needing to explicitly tell it so. Here’s a list of those that do:

  • border-collapse
  • border-spacing
  • caption-side
  • color
  • cursor
  • direction
  • empty-cells
  • font-family
  • font-size
  • font-weight
  • font-style
  • font-variant
  • font
  • letter-spacing
  • list-style-type
  • list-style-position
  • list-style-image
  • list-style
  • line-height
  • orphans
  • page-break-inside
  • quotes
  • text-align
  • text-indent
  • text-transform
  • visibility
  • white-space
  • widows
  • word-spacing

If you use inherit on any of the shorthand properties (like font or list-style), you can’t use it along with other values. You have to declare the entire value as “inherit” or else not use it at all.

Web Tools Weekly

5 Responses

  1. Steve:

    You’re missing a comma in your 3rd code snippet.

    • No I’m not. I’m targeting all “p” elements inside of “divs”.

      But I added a little more to it to compromise, so it’s easier to understand. :) Thanks.

    • Gerelt Od:

      There are no comma needed, Because that row means div elements and paragrah inside div elements.

  2. I always use inherit to give the same color to anchor tags as their parents :)

Leave a Reply

Comment Rules: Please use a real name or alias. Keywords are not allowed in the "name" field. If you use keywords, your comment will be deleted, or your name will be replaced with the alias from your email address. No foul language, please. Thank you for cooperating.

Instructions for code snippets: Wrap inline code in <code> tags; wrap blocks of code in <pre> and <code> tags. When you want your HTML to display on the page in a code snippet inside of <code> tags, make sure you use &lt; and &gt; instead of < and >, otherwise your code will be eaten by pink unicorns.