<p>I'm green because got my color from root</p>
<div>I got blue from div selector</div>
<div class="error">
I'm red because the .error.
<p>Another red here because inheritance!</p>
</div>
:root { --text-color: green; }
div { --text-color: blue; }
.error { --text-color: red; }
* {
color: var(--text-color);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.