I developed a calendar system where each day is represented as a list item. Within each item, there is a span element with a data-count attribute that indicates the availability of a specific resource, which is updated dynamically. My goal is to change the background color of the span based on the value of this attribute. Instead of handling each value individually, I am looking for a way to manage it in ranges. For example, if the data-count falls within [0, 999], the background should be green; for [1000, 9999], it should be orange; and for values greater than or equal to 10000, it should be red.
Is there a CSS-only solution to accomplish this without the need for additional JavaScript or HTML modifications? If so, how can I implement it? Also, is there a specific CSS selector that can target all spans with a data-count within the range of [0, 999]?
Below is the current styling being used:
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;
}
The HTML structure is as follows:
<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>