Me gustaría ocultar un elemento si un css var es mayor que cero. Puedo hacer que funcione el caso inverso:
#container { display: flex; width: 100%; height: 30px; border: 1px soild black; } .item { opacity: max(calc( var(--ind)*1), 0); /* or clamp(var(--ind), 0 , 1);*/ width: 30px; height: 100%; } <div id="container"> <div class="item" style="--ind: 0;background-color:red;"></div> <div class="item" style="--ind: 1;background-color:orange;"></div> <div class="item" style="--ind: 2;background-color:yellow;"></div> <div class="item" style="--ind: 3;background-color:green;"></div> <div class="item" style="--ind: 4;background-color:blue;"></div> </div>Sin embargo, me gustaría que el ejemplo anterior muestre solo el cuadrado rojo. ¿Alguien puede ver cómo hacer esto (en CSS puro)?
#container { display: flex; width: 100%; height: 30px; border: 1px soild black; } .item { opacity: min(calc( 1 - var(--ind)), 1); width: 30px; height: 100%; } <div id="container"> <div class="item" style="--ind: 0;background-color:red;"></div> <div class="item" style="--ind: 1;background-color:orange;"></div> <div class="item" style="--ind: 2;background-color:yellow;"></div> <div class="item" style="--ind: 3;background-color:green;"></div> <div class="item" style="--ind: 4;background-color:blue;"></div> </div>