.blue-text {
      --color: blue;
    .red-text {
      --color: red;
    .my-text {
      color: var(--color);
    <div class="blue-text">
      <div class="my-text">
        This will be green (because the JS will change the color property)
      <div class="red-text">
        <div class="my-text">
          This will be red (even though it's within the blue-text div, the
          red-text is more specific).
      const blueTextDiv = document.querySelector('.blue-text')
      blueTextDiv.style.setProperty('--color', 'green')

<!-- https://kentcdodds.com/blog/super-simple-start-to-css-variables -->
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.