How can I store an inherited value in a CSS variable?

Inheriting Values in CSS Variables

In the realm of CSS, custom properties, also known as CSS variables, offer immense flexibility and control over styles. A common question arises when we want to store an inherited value within a variable. Let's dive into a solution.

The Challenge

Consider the following code:

:root {
  --color:rgba(20,20,20,0.5);
}

.box {
  --color: inherit;
  background: var(--color);
}

Here, we aim to have the background inherit the color from the :root element. However, using inherit as the value of --color does not work due to inheritance rules.

The Solution: Fallback Value and Initial Keyword

To store an inherited value, we can leverage the fallback value feature of CSS variables. We can set:

background: var(--color, inherit);

This tells the browser to use inherit if --color is not defined. However, since --color is always defined at the :root level, it won't use the fallback.

To address this, we can reset --color to its initial value using the initial keyword:

.box {
  --color: initial;
  background: var(--color, inherit);
}

Using initial effectively unsets the custom property, allowing inherit to take effect. This code will successfully inherit the color from the :root element.

The above is the detailed content of How can I store an inherited value in a CSS variable?. For more information, please follow other related articles on the PHP Chinese website!