Core Code
Core Code Modern Dev Handbook

Variable Override

Child elements can override parent variables.

Preview

Code

<style>
:root{
--color:#2563eb;
}

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

.box span{
--color:#ef4444;
}
</style>

<div class="box">
Parent text
<span>Overridden color</span>
</div>

More CSS Variables Examples (8)

example Update Variable with JavaScript open example example Basic CSS Variable open example example Multiple Variables open example example Variable Scope open example example Variable Fallback open example example Theme Variables open example example Variable Hover Change open example example Variables in Media Queries open example