Inherit - CSS Value

The value inherit.

When a property is set to the inherit value, it takes on the same value as the equivalent property of the parent element. The parent element is the one that, in the DOM tree, is above the element in question.

The inherit value is mostly used to re-enable the inheritance mechanism when a property has previously been set to a different value. It can also enable inheritance on a property that is not inherited by default.

See also unset, initial, revert, revert-layer and revert-rule.

The inherit value and relative values.

Relative values are values that are computed from another value. Example: the em unit, which defines a dimension relative to the parent font size.

Typically, the inherit value retrieves the computed value of the parent element. The calculation is therefore not redone on the element itself.
For example, consider a font size set to 2em on the parent element. Which gives let's say 24 pixels. Child elements will inherit the computed value (24 pixels) and not the 2em, which would ultimately give a 48 pixel font on kids.

However, there's one exception to this rule: percentages. Inheritance is done with the percentage value, not the computed value.

Examples and practical cases.

Example 1.

Force the inheritance mechanism on a property that by default does not inherit its value. This is the case of background-color.

Browser support (compatibility).

The inherit value is very well recognized by all current browsers.

1

inherit
value

Estimated overall support.

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Safari

Safari sur IOS

Opéra

Chrome

Edge

Firefox

Chrome pour Androïd

Samsung Internet

Androïd Brower

Firefox pour Androïd

KaiOS Browser

Opéra mini

See Caniuse.com for more compatibility information.

Caniuse

The history of the inherit property.

The inherit value is also cited in the CSS Values and Units level 3 and 4 modules.

• Cascading Style Sheets Level 2 - Revision 1 Specification

  This level 2 of the specification describes the mechanism of cascading styles in CSS. This language is used to format HTML or XML documents. It supports media-specific style sheets so that authors can adapt the presentation of their documents for visual browsers, auditory devices, printers, braille devices, portable devices, etc.

  Regarding inherit Introduction of the inherit value to force inheritance of the parent's value.
  

  November 04, 1997

  Working Draft.

  

  March 24, 1998

  Proposed for recommendation.

  

  May 11, 1998

  Recommendation .

• CSS Cascading and Inheritance Level 3

  This specification module introduces the values initial and unset, as well as the shorthand property all.

  Regarding inherit No change to the inherit value.
  

  July 13, 2001

  Working Draft.

  

  October 03, 2013

  Candidate Recommendation.

  

  December 22, 2020

  Proposed for recommendation.

  

  February 11, 2021

  Recommendation .

• CSS Cascading and Inheritance Level 4

  This specification module introduces the revert value.

  Regarding inherit No change to the inherit value.
  

  April 21, 2015

  Working Draft.

  

  January 14, 2016

  Candidate Recommendation.

  

  

• CSS Cascading and Inheritance Level 5

  This specification module introduces the concept of style layer, the @layer directive, and the revert-layer value.

  Regarding inherit No change to the inherit value.
  

  January 19, 2021

  Working Draft.

  

  January 13, 2022

  Candidate Recommendation.

  

  

See also, about values.

The CSS specifications published by the W3C are organized into modules. The inherit property is part of the CSS Cascading and Inheritance module. The following definitions are also described in this same module.

Properties:

At-rules:

@import

Importing a stylesheet, with the possibility of choosing a cascade layer.

@layer

Defines cascade layers to help manage priorities between CSS rules.

⚠

@scope

Limit the scope of the instructions encompassed by this directive.

Values: