Can We Use CSS Custom Properties to Inherit Values From Parent Elements?

Can We Store Inherited Values in CSS Custom Properties?

In CSS, custom properties (also known as CSS variables) provide a convenient way to store and reuse values throughout a document. However, can these variables inherit values from their parent elements?

Let's consider a sample code:

:root {
  --color: rgba(20, 20, 20, 0.5); /* Default value */
}

.box {
  width: 50px;
  height: 50px;
  background: var(--color);
}

.red {
  background: rgba(255, 0, 0, 0.5);
}

.blue {
  background: rgba(0, 255, 255, 0.5);
}

.box:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  transform: translateX(30px);
  background: var(--color);
  filter: invert(1);
}

In this example, we want to inherit the background color of the .box element for its :before pseudo-element using CSS variables. However, the --color variable is defined at the :root level, and the :before pseudo-element is nested within .box.

Setting background: inherit on :before does not work, as custom properties take precedence over inherited values.

The Solution: Initial Value Fallback

To store an inherited value in a CSS variable, we can utilize the CSS initial value as a fallback. The initial value represents the default or unset state of a property.

In our case, we can modify our code as follows:

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

By specifying initial as the fallback value for var(--color), we force the use of the inherited value when --color is not explicitly set. This allows us to inherit the background color from the parent element.

To demonstrate this, let's set the background color of .box to gray. Even though we don't explicitly define --color in this case, the :before pseudo-element will still inherit the background color of .box due to the initial value fallback.

.box {
  background: gray;
  --color: initial;
}

The above is the detailed content of Can We Use CSS Custom Properties to Inherit Values From Parent Elements?. For more information, please follow other related articles on the PHP Chinese website!