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-collapseborder-spacingcaption-sidecolorcursordirectionempty-cellsfont-familyfont-sizefont-weightfont-stylefont-variantfontletter-spacinglist-style-typelist-style-positionlist-style-imagelist-styleline-heightorphanspage-break-insidequotestext-aligntext-indenttext-transformvisibilitywhite-spacewidowsword-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.
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.
There are no comma needed, Because that row means div elements and paragrah inside div elements.
I always use inherit to give the same color to anchor tags as their parents :)
MMmmm interesting….thanks.
Does inherit code create some issue with W3Cvalidation?