Why Are My Nested CSS Scoped Custom Properties Being Ignored?

CSS Scoped Custom Property Ignored within Nested Declarations

When defining custom properties within CSS, it's essential to understand how scoping affects their evaluation. Scoped custom properties are only locally available within the element or component where they are defined. However, a common challenge arises when attempting to use scoped custom properties in outer scopes.

In this specific case, the goal is to define a scale factor via a custom property and apply it across different elements. However, as demonstrated, all list elements are scaled equally, regardless of the scale class applied.

To address this issue, it's crucial to note that custom properties are evaluated top-bottom. When a custom property is defined at the root level, as in this example, any subsequent definition of the same property within nested elements will be ignored.

Consider this simplified illustration:

:root {
  --color: var(--c, blue);
}

span {
  color: var(--color);
}

Here, the custom property --color is defined at the root level. If we try to override it within a span element:

<div>
  <div class="box">
    <span>

The span element with nested CSS declaration will not turn red. This is because the custom property has already been evaluated at the root level, setting --color to blue, and overriding attempts are ignored.

In contrast, the span element with the inherited --c: red will turn red because it inherits the custom property value from its parent element.

To achieve the desired effect, it's necessary to ensure that the custom property is evaluated within each nested component individually. This can be done by defining the property locally within each class or component, as opposed to at the root level.

The above is the detailed content of Why Are My Nested CSS Scoped Custom Properties Being Ignored?. For more information, please follow other related articles on the PHP Chinese website!