How to Achieve Inherited Values with CSS Variables?

How to Store Inherit Value Inside a CSS Variable (aka Custom Property)?

Scenario

Consider the following CSS code:

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

.box {
  width: 50px;
  height: 50px;
  display: inline-block;
  margin-right: 30px;
  border-radius: 50%;
  position: relative;
}

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

.blue {
  background: rgba(0, 255, 0, 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 code, we use --color to control the background of the .box element's pseudo-element. However, we may encounter a situation where we desire to inherit the color from the parent .box element.

CSS Variable Inheritance Challenge

In CSS, the inherit keyword is not supported as a value for CSS variables. This means we cannot directly set --color to inherit to achieve our desired effect.

Solution: Using Fallback Value and Initial Value

To overcome this limitation, we can employ two techniques:

1. Using Fallback Value:

By utilizing the fallback value in CSS variables, we can tell the property to use inherit if --color is not explicitly defined.

background: var(--color, inherit);

However, in this case, because --color is always defined at the root level and inherited, the fallback value will never be used.

2. Using Initial Value:

We can employ the initial value to "undefine" --color and force the use of the fallback value. As per the CSS specification, the initial value is an empty value, which has a special interaction with var().

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

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

With this modification, we can achieve inherit value inheritance within the CSS variable, enabling us to control the background color based on the parent element's color.

<div class="box red">

The above is the detailed content of How to Achieve Inherited Values with CSS Variables?. For more information, please follow other related articles on the PHP Chinese website!