0

I built a calendar, each day is a list item. It contains a span element with a data-count attribute. This attribute is intended to show the availabilty of a resource and is dynamically updated. I want to show this availability with the background color of the span. I can manage each value individually but I would like to manage it by ranges, for example if data-count is in [0, 999] the backgound is green, in [1000, 9999] with orange, and >= 10000 : red

Is there a way to manage this in css only (without any additionnal javascript or html change) ? (if yes how ? ) Is there a CSS selector to get all the spans with data-count in range [0, 999] ?

Here is the style

li { 
    list-style-type: none;
    display: inline-block;
    width: 18%;
    text-align: left;
    margin-bottom: 5px;
    background: #bbb;
    padding: 5px;
}

li span {
    display: inline-block;
    padding: 5px;
    width: 90%;
}

li span[data-count="50"] {
    background: lime;
}
li span[data-count="5001"] {
    background: orange;
}
li span[data-count="50000"] {
    background: red;
}

Here is the html

<ul>
    <li><span data-count="50" >1/1/70 - free</span></li><br>
    <li><span data-count="51" >2/1/70 - free</span></li><br>
    <li><span data-count="5001">3/1/70 - hurry up</span></li><br>
    <li><span data-count="50000">4/1/70 - last chance</span></li>
</ul>
Tuckbros
  • 417
  • 3
  • 13

1 Answers1

0

An idea if you can replace the data value with CSS variables (similar to this answer)

li { 
    list-style-type: none;
    display: inline-block;
    width: 18%;
    text-align: left;
    margin-bottom: 5px;
    background: #bbb;
    padding: 5px;
}

li span {
    display: inline-block;
    padding: 5px;
    width: 90%;
    background:
      /* from 10000 to infinity */
      linear-gradient(red,red)      0 /100% calc((var(--count) - 9999)*1px),
      /* from 1000 to 9999*/
      linear-gradient(orange,orange)0 /100% calc((var(--count) - 999)*1px),
      /* from 0 to 999*/
      green; 
}
<ul>
    <li><span style="--count:50" >1/1/70 - free</span></li>
    <li><span style="--count:51" >2/1/70 - free</span></li>
    <li><span style="--count:5001">3/1/70 - hurry up</span></li>
    <li><span style="--count:50000">4/1/70 - last chance</span></li>
</ul>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • it is not very DRY, this is not the only purpose of the `data-count` attribute. However it is updated this way : `setAttribute('data-count', parseInt(day.getAttribute('data-count'),10)+1);` which is launched on message from a websocket. I would have to add near this, some code to parse the `style` attribute to keep its original content and update only the count. I will dig into this, but can't validate it as an answer as I would have to change the html. I think it will stay with no answer whiole for the `attr()` css function doesn't support numbers. – Tuckbros Jun 06 '20 at 11:59
  • @Tuckbros I answered based on the information you gave. I cannot know how you are doing behind and you don't need to parse the Style attribute, you can simply do `.style.setProperty("--count", 50);` and `.style.getPropertyValue('--count')` – Temani Afif Jun 06 '20 at 12:07
  • the question is about only css given an html. Because I can, I will use the workaround. But it is not a satisfying answer as it requires changes out of the scope of the question which was requiring css only. – Tuckbros Jun 06 '20 at 12:15
  • @Tuckbros there is nothing in your question saying that *you aren't allowed to change your html*. CSS only doesn't imply that you cannot adjust the HTML because both works together, I adjusted the HTML to suit the CSS solution I am using. Edit your question to add more context and to say all what you have said in this comment section to be able to get accurate answer. – Temani Afif Jun 06 '20 at 12:27
  • and to increment it is done with `getPropertyValue` : here is what I use as a workaround `.style.setProperty('--data-count', parseInt(day.style.getPropertyValue('--data-count'),10)+1);` and it has to be intialized to not get a `NaN` – Tuckbros Jun 06 '20 at 16:49