The “inherit” Value for CSS Properties

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.

8 Responses

  1. Steve says:

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

  2. Saad Ibrahim says:

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

  3. Amna Sheikh says:

    Does inherit code create some issue with W3Cvalidation?

Leave a Reply

Comment Rules: Please use a real name or alias. Keywords are not allowed in the "name" field and deep URLs are not allowed in the "Website" field. If you use keywords or deep URLs, your comment or URL will be removed. No foul language, please. Thank you for cooperating.

Markdown in use! Use `backticks` for inline code snippets and triple backticks at start and end for code blocks. You can also indent a code block four spaces. And no need to escape HTML, just type it correctly but make sure it's inside code delimeters (backticks or triple backticks).