Search code examples
htmlcsscss-selectors

Is it possible to select all elements with an attribute value greater than a certain number?

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?

Solution

  • 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.