inherits CSS at-rule descriptor

The inherits CSS descriptor of the @property at-rule controls whether or not the registered CSS custom property inherits by default. It is a required descriptor; if missing or invalid, the entire @property rule is invalid and ignored.

Syntax

css
/* Custom property does not inherit values */
inherits: false;

/* Custom property inherits values */
inherits: true;

Values

true

The property inherits by default.

false

The property does not inherit by default.

Formal definition

Related at-rule@property
Initial valueauto
Computed valueas specified

Formal syntax

inherits = 
  true   |
  false

Examples

undefined

Setting inheritance behavior of a custom property

This example shows how to define a custom property --my-color that does not inherit its value from its parent elements:

css
@property --my-color {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0ffee;
}

Using JavaScript CSS.registerProperty():

js
window.CSS.registerProperty({
  name: "--my-color",
  syntax: "<color>",
  inherits: false,
  initialValue: "#c0ffee",
});

Specifications

See also