Display nested unordered list

by _sir

HTML

<h1>CSS Variables</h1>
<ul>
  <li class="c1">Some text 1</li>
  <li class="c2">Some text 2</li>
  <li class="c3">Some text 3</li>
  <li class="c4">Some text 4</li>
  <li class="c5">
    Some text 5
    <ul class="component">
      <li class="c1">Some text 1</li>
      <li class="c2">Some text 2</li>
      <li class="c3">Some text 3</li>
      <li class="c4">Some text 4</li>
    </ul>
  </li>
</ul>

CSS

body { font-family: sans-serif; }

:root {
  --text-color: blue;
}

li {
  color: var(--text-color);
}

li.c3 {
  --text-color: green;
}

li li {
  --text-color: red;
}