Using CSS variables in pseudo-selectors

Question

I've been attempting to use CSS variables on a pseudo-selector without much success. Here's what my code looks like:

ul {
  --red-items: 3;
  --main-color: red;
}

ul li {
  color: blue;
}

ul li:nth-of-type(var(--red-items)) {
  color: red;
}

/* THIS WORKS */
/* ul li:nth-of-type(3) {
  color: var(--main-color);
} */

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

if I replaced the variable with an actual value, let's say "3" (like below) my code works. I'm not sure if this is the expected behavior or there's a way around this

ul li:nth-of-type(3)

PS: Here's also a codepen for reference https://codepen.io/talentedunicorn/pen/JBQNaX