Is there a clever class naming scheme, that would make it easy to provide hooks for CSS styling on things based on the range of a numerical value.

A common example might be a progress bar which changes color at different percentages.

It will likely have the number available in some way, but no easy way in CSS to say "red up to 50%, then yellow above that, then green from 80% up. Many existing solutions will just generate 100 lines of CSS that each target a single number value with a pre-processor in advance and then work off a single class like .progress99 for 99% progress and if you want to target a range of 51 items, then you'd either use 51 classes, or (49 classes to invert the selection).

This is clunky but workable for a small number like 100, and can even be optimised a little for single use cases with sass mixins that would only use the minimum css required to match everything you need in a specific project and generate the boring bits.

But is there anything cleverer that you can do that would work for potentially any number in a classname with only CSS side changes to control which numerical range is targetted?

I'm assuming that if there is someone would have done it already, but also think that in most cases you can either:

a) add the logic to the server side and add a .success class or whatever when the number is above the required value

b) use JS to do the above logic on the client side.

c) use nth-child selectors to affect the children if it's the number of children that are relevant (though you can't target the parent with this trick)

so possibly it's just never been thought worth the effort, but is it actually possible?

CodePudding user response：

Disclaimer:

you should probably be using javascript to achieve the desired results you're looking for. If you're using a percentage system as per your example this implies that you are almost certainly using javascript on the page already.

The CSS

you can use :nth-of-type(n) so for example of you want to target the 51st percentile you can do

.percentageBlock:nth-of-type(51) {
     background-color: red; /* The 51% mark will be red */
}

Where you have 100 divs each classed as class='percentageBlock'. You can also do values above a certain criteria (ie 50% or more) by using the 50 n syntax in the above.

.percentageBlock:nth-of-type(50   n) {
     background-color: blue; /* The 50% mark and all after it will be blue */
}

A note about nth-child is that it only works on elements not on classes. Please see This Answer Here for further details.

Example: A few terse examples of what I describe above using the percentage chart analogy...

#wrapper {
  width:100vw;
  margin: 0;
  padding:  0;
  box-sizing: border-box;
  
}

#wrapper > div {
    width: 10%;
    display:inline-block;
    text-align: center;
    padding: 0.5rem 0;
      margin: 0;
  box-sizing: border-box;
}

div#wrapper > div:nth-child(1),
div#wrapper > div:nth-child(2)
 {
   background-color: red;
}

div#wrapper > div:nth-child(n   3){
   background-color: green;
}

<div id='wrapper'><div>10%</div><div>20%</div><div>30%</div><div>40%</div><div>50%</div><div>60%</div><div>70%</div><div>80%</div><div>90%</div><div>100%</div>
</div>

CodePudding user response：

Rather than "parsing numbers" you'd better directly set numeric custom property and then exploit it as "offset" (animation-delay) in paused animation (or in any other calc expression).

With this you can have smooth or even step transitions between defined keyframes.

POC:

@keyframes x {
  from {
    color: green;
  }
  50% {
    color: orange;
  }
  75% {
    text-decoration: underline;
  }
  to {
    font-size: 3em;
    text-decoration: line-through;
    color: red;
  }
}

p {
  animation-name: x;
  animation-duration: 100ms;
  animation-play-state: paused;
  animation-timing-function: linear;
  animation-delay: calc(var(--v) * -1ms);
  animation-fill-mode: both
}

<input type="range" min="0" max="100" value="0" oninput="document.body.style.setProperty('--v',this.valueAsNumber)">
<p>Test dynamic
<p style="--v: 0">Test 0
<p style="--v: 33">Test 33
<p style="--v: 77">Test 77