Compare Attribute Values as Numbers

CSS has attribute selectors that are able to select elements that contain exact matches of values or partial matches of values, but has no way to select elements by comparing the value of an attribute as a number with operators like greater than, less than, greater or equal, or less or equal.

Both JavaScript and XPath are able to evaluate the values of attributes as numbers and select elements based on comparisons like this.

Parts Required

JS Tests

Value less than:

element.value < test

Value less or equal to:

element.value <= test

Value equal to:

element.value == test

Value greater or equal to:

test <= element.value

Value greater than:

test < element.value

Value between 5 and 10:

(5 < element.value) && (element.value < 10)

Syntax Examples

EQCSS

@element input {
  eval("value > 50 && '$this'") {
    background: lime;
  }
}

Selectory

input[test="this.value > 50"] {
  background: lime;
}

XPathy

[xpath="//*[5 < @data-num]"] {
  color: black;
  background: lime;
}

[xpath="//*[10 <= @data-num][@data-num <= 15]"] {
  color: red;
  border: 1px dotted red;
}

Plugins Capable

Demos