5

I wonder if the following is possible with CSS:

HTML-Code:

<span class="funny-elem" data-mystate="127">Hello World</span>
<span class="funny-elem" data-mystate="69">Hello Bird</span>
<span class="funny-elem" data-mystate="1337">Hello Nerd</span>
<span class="funny-elem" data-mystate="14">Hello What</span>
<span class="funny-elem" data-mystate="0">Hello Else</span>
...

CSS-Code:

.funny-elem[data-mystate=">50"] {
    color:#0f0;
}

.funny-elem[data-mystate="<50"] {
    color:#f00;
}

The above CSS code will not work of course as the "greater than" and "lesser than" sign are interpreted as attribute value here.

However do you know a way to select all elements with an numerical attribute value greater than or lesser than a certain number?

j08691
  • 204,283
  • 31
  • 260
  • 272
Blackbam
  • 17,496
  • 26
  • 97
  • 150

2 Answers2

4

No, there's no way in pure CSS.

Possible attribute selectors are:

  • [att]
  • [att=val]
  • [att~=val]
  • [att|=val]

And W3's docs on Attribute Selector adds:

Attribute values must be CSS identifiers or strings. [CSS21] The case-sensitivity of attribute names and values in selectors depends on the document language.

So, they're not numeric. There's no way to use any numeric comparision.

LcSalazar
  • 16,524
  • 3
  • 37
  • 69
  • 1
    As I just saw possible hack would be: [att^=val] concretly [data-mystate^="1"] to select all states starting with 1. However thats not actually solving the problem why didnt they make an selector like [attr>=val] ? – Blackbam Jul 24 '15 at 15:59
  • Because then CSS would need to know that **val** is a number. And CSS does not threat them as numbers (at least yet) :) – LcSalazar Jul 24 '15 at 16:02
  • Well I think they could at least have implemented some possibility for string comparison (greater than). However it looks like I have to accept there is currently no way O:-) However I just came up with one evil hack - you output the number in unary and use [data-mystate^="11111"] and so on :-D – Blackbam Jul 24 '15 at 16:06
  • @Blackbam - What is generating this `data-mystate` value? – LcSalazar Jul 24 '15 at 17:02
  • its a database number output by PHP. However I know that changing the HTML would change the actual question therefore your answer is correct. I just wait for one more day if somebody comes up with another idea. – Blackbam Jul 24 '15 at 17:15
  • I would sugest you to implement the logic in PHP then. Check if the data-state is less than 50, set a specific class to the span. – LcSalazar Jul 24 '15 at 17:29
0

Basic CSS3 does not support logic -- it is strictly style.

You could achieve what you want by using Javascript to do the logic and add a class to your span if the statement is true, or use a preprocessor for your CSS, such as LESS or SASS.

Here's how you could do it with a class and pure Javascript:

<script type="text/javascript">
  var x = document.getElementsByClassName("funny-elem")
  var i;

  for (i = 0; i < x.length; i++) {
    var comparator = x[i].getAttribute("data-mystate");
    if (comparator > 50){
      x[i].setAttribute("class","funny-elem over50");
    }
    if (comparator < 50){
      x[i].setAttribute("class","funny-elem under50");
    }
  }
</script>

<style>
  .funny-elem.over50{ color:#0f0;}
  .funny-elem.under50{ color:#f00;}
</style>

View jsFiddle example

CreMedian
  • 763
  • 5
  • 15