CSS variables are resolved before the value is inherited

Custom properties resolve any var() functions in their values at computed-value time, which occurs before the value is inherited.

by Konstantin Rouda

HTML

<article> 
  <p>Paragraph Text</p>
</article>

CSS

:root {
  /*--main-color doesn't exists on :root so default value will be assigned*/
  --text-color: var(--main-color, red);
}

ARTICLE {
  /*this won't change the value*/
  --main-color: cornflowerblue;
}

P {
  /*so --text-color will get its value from the fallback value from the :root, that is RED*/
  color: var(--text-color);
}

























































HTML {
  font-size: 3rem;
}