CSS @property - inherits

The presence of the CSS descriptor inherits is mandatory if the at-rule @property is used.

It determines whether the custom property registration defined by @property is inherited by default or not.

Possible values

  • true - The property is inherited by default.

  • false - The property is not inherited by default.

Syntax

inherits = true | false

CSS inherits - border-color

The following code is an example of inherits descriptor

  • In the following example using @property, the descriptor defines a custom property, --theme-color, configured with inherits: true;.

  • This allows the defined --theme-color to inherit its value throughout the DOM hierarchy, ensuring that elements within the .container inherit this property for their text and background colors.

  • The specified --theme-color is inherited by .title, .text, and .nested-text elements, ensuring uniformity in text color and background throughout the nested structure.

<html>
<head>
<style>
   @property --theme-color {
      syntax: '<color>';
      inherits: true; /* Specifies that this property should inherit its value */
      initial-value: black; /* Default color if not explicitly set */
   }
   /* Apply the custom property to style elements */
   .container {
      --theme-color: red; /* Set a custom color for the container */
   }
   .title,
   .text,
   .nested-text {
      color: var(--theme-color); /* Inherit theme color for text */
      background-color: #f7f7f7; /* Set a light background color */
      padding: 10px;
      margin: 5px 0;
   }
   .title {
      font-size: 24px;
   }
</style>
</head>
<body>
   <div class="container">
      <div class="header">
         <h1 class="title">Custom Properties Example</h1>
      </div>
      <div class="content">
         <p class="text">This text inherits the theme color for text and background.</p>
         <div class="nested">
         <p class="nested-text">Nested text inherits the same theme color!</p>
         </div>
      </div>
   </div>
</body>
</html>
Advertisements