ContextQMD
Back to Content

inherits

files/en-us/web/css/reference/at-rules/@property/inherits/index.md

latest1.8 KB
Original Source

The inherits CSS descriptor of the {{cssxref("@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

{{cssinfo}}

Formal syntax

{{csssyntax}}

Examples

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 {{domxref('CSS.registerProperty_static', 'CSS.registerProperty()')}}:

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

Specifications

{{Specifications}}

Browser compatibility

{{Compat}}

See also