Workaround: CSS Selector Greater Than Number

There is no greater than number selector in CSS3. Neither there is less than number CSS selector.

I was recently doing a rewrite of a bicycle mapping application. I wanted to style a bicycle parking stand in a way there there will be bike capacity displayed next to it.

But how to style such an icon, if there is no CSS selector for number comparison (equals, greater then, less then).

Then I had an idea, let’s use the class name to match and style capacity number. In the end I used class name to match the numbers.

One digit numbers are easy:

.parking.capacity-2::before {
    content: "2";
}
.parking.capacity-3::before {
    content: "3";
}
.parking.capacity-4::before {
    content: "4";
}
.parking.capacity-5::before {
    content: "5";
}
.parking.capacity-6::before {
    content: "6";
}
.parking.capacity-7::before {
    content: "7";
}
.parking.capacity-8::before {
    content: "8";
}
.parking.capacity-9::before {
    content: "9";
}

Two (and more) digit numbers need a small workaround to match and style properly:

.parking[class*=" capacity-1"]:not([class*="capacity-1 "])::before {
    content: "10+";
}
.parking[class*=" capacity-2"]:not([class*="capacity-2 "])::before {
    content: "20+";
}
.parking[class*=" capacity-3"]:not([class*="capacity-3 "])::before {
    content: "30+";
}

So what is going on here? As same or similar CSS rules override each other, I use this to ensure proper display a correct number / capacity.

Translation for the code above is this:

10+: Match elements with class [space]capacity-1 (anything 10+), but not those with capacity-1[space] (equals 1). I can use space as there are multiple classes always before. You might want to use and match a data-attribute instead.
Repeat same for anything over 20 and over 30. You could repeat this until your practical maximum.

And it works:

CSS - using number comparison selector (greater than, less than, equals) to display bike stand capacity — CSS – using number comparison selector (greater than, less than, equals) to display bike stand capacity

Comparing greater than number in CSS selector

This solution hacks CSS to compare greater than number (bigger than number).

Comparing less than number in CSS selector

You could similar workaround to use comparison for less than number (smaller than number) in reversed direction (from the greatest to the smallest).