Styling Items by List-Length

I quickly wrote this snippet last week to demonstrate to a colleague that we could progressively modify elements’ style by passing list item number and list length via inlined custom css properties.

SCSS li {
  opacity: calc(1 - (var(--children, 1) - var(--i, 1)) / var(--children, 1));
} 

HTML <ul style="--children: 5">
  <li style="--i: 1">Item 1</li>
  <li style="--i: 2">Item 2</li>
  <li style="--i: 3">Item 3</li>
  <li style="--i: 4">Item 4</li>
  <li style="--i: 5">Item 5</li>
</ul> 