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?
No, there's no way in pure CSS.
Possible attribute selectors are:
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.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments