title: How to show variable number of elements based on CSS variable value
body: <p>I have a CSS variable --num containing a number.</p>
  
  <p>I have N HTML elements as children of the same parent. Element n and element n+1 are adjacent siblings, if that matters... in other words, the N elements are all adjacent.</p>
  
  <p>How can I display element n of that collection of N elements, if and only if n is less than the value of --num ?</p>
  
  <p>I don't seem to be able to reference CSS variables in selectors, such as :nth-child( var( --num )) but only in styles.</p>
  
  <p>Obviously I could write javascript to retrieve --num and loop over the elements, changing their display: setting. But is there something better? Clever tricks in CSS that could achieve something like that without javascript?</p>