Even though certain characteristics are inherited automatically in CSS,
there may be situations in which you want to increase the weight of the
inherited property. Specifying a value of inherit for
any CSS property that’s applied to an element will cause the element to
gain its parent’s computed value for the property in question. By
specifying in the author style sheet that a property should inherit its
value, you can increase its weight.
Internet Explorer 7 and earlier versions don’t support the value
inherit for any properties other than direction and visibility.
Normally, in the absence of any applicable declaration, the
color property is inherited. However, in the case of
anchor elements, the color property is commonly set to
blue in the user agent style sheet. If you wanted to reinforce the
importance of the inherited value, you could use the value
inherit in an author or user style sheet, overwriting
the user agent style sheet declaration. In the following example, we set
the foreground color of the p element to
#000, or black, and specify that any child anchor
elements should inherit the value of the foreground color from their
parent element:
p {
color: #000;
}
p a:link {
color: inherit;
}
When you’re using shorthand notation such as
background, you can’t mix inherit
with other values. For example, the following
background declaration is wrong:
p {
background: #fff inherit left top;
}
In this case, you might be hoping that this element will inherit the
parent’s background-image property. Unfortunately,
you’d be out of luck. inherit must be the only value
in the declaration, because there’s simply no way of identifying the
subproperty to which the value inherit refers—after
all, it’s not unique within the sequence. In the example above,
inherit becomes ambiguous: it could refer to the
background-image property, or to the
background-attachment property, and the user agent has
no way of knowing which one it applies to. To have an element inherit a
specific property, you need to use the full notation instead of shorthand.
In this case, we need to specify the background-image
property:
p {
background-image: inherit;
}
To find if a property is inherited by default, refer to the specific property reference page.
User-contributed notes
- ID:
- #2
- Date:
- Thu, 21 May 2009 19:20:59 GMT
- Status:
- This note has not yet been confirmed for accuracy and relevance.
"...you can increase its weight" (para 1)
I had to search the site to find what this phrase meant. Is it worth adding a link for beginners?
Add a note
To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.