inherit (CSS Property Value)

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.

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.

Learn HTML5 Online

Get all SitePoint books and courses with a Learnable membership. Start building future-proof websites that are faster, more powerful, and easier to maintain.

No Reader comments

Comments on this post are closed.