CSS attribute value less than / greater than / equals selectors

Yesterday Ana Tudor wondered if should could write CSS selectors using less-than and greater-than logic:

CSS attribute selector wish:
[data-code>2][data-code<19] { /* styles */ }
[data-code>=19][data-code<65] { /* other styles */ }
and so on…

— Ana Tudor (@anatudor) October 12, 2016

Unfortunately this kind of selectors don’t work (yet). Until then one could use JavaScript to tackling this problem, or use a pure HTML/CSS-based solution.

~

The HTML/CSS solution is a 2-step process/hack:

1. Inject all the values that the item is not equal to using data-* attributes.
2. Use the CSS Attribute “Value Contains” Selector (e.g. [attribute~=value]) on those data-* attributes.

1. Injecting extra data-* attributes

Say you have a list of 10 items (from 1 to 10):

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
</ul>

About the 7th item you can state that it:

• it equals (eq) 7
• it is greater than or equals (gte) 1, 2, 3, 4, 5, 6, and 7
• it is greater than (gt) 1, 2, 3, 4, 5, and 6
• it is less than or equals (lte) 7, 8, 9, and 10
• it is less than (lt) 8, 9, and 10

Translated to new data-* attributes, the HTML for this 7th item becomes this:

<li data-val-eq="7"
    data-val-gte="1 2 3 4 5 6 7"
    data-val-gt="1 2 3 4 5 6"
    data-val-lte="10 9 8 7"
    data-val-lt="10 9 8">
7</li>

About all other items you can state the same things. Using a template engine, such as Jade, you can easily script this kind of stuff automatically and eventually end up with this markup:

<ul>
	<li data-val-eq="1" data-val-gte="1" data-val-gt="" data-val-lte="10 9 8 7 6 5 4 3 2 1" data-val-lt="10 9 8 7 6 5 4 3 2">1</li>
	<li data-val-eq="2" data-val-gte="1 2" data-val-gt="1" data-val-lte="10 9 8 7 6 5 4 3 2" data-val-lt="10 9 8 7 6 5 4 3">2</li>
	<li data-val-eq="3" data-val-gte="1 2 3" data-val-gt="1 2" data-val-lte="10 9 8 7 6 5 4 3" data-val-lt="10 9 8 7 6 5 4">3</li>
	<li data-val-eq="4" data-val-gte="1 2 3 4" data-val-gt="1 2 3" data-val-lte="10 9 8 7 6 5 4" data-val-lt="10 9 8 7 6 5">4</li>
	<li data-val-eq="5" data-val-gte="1 2 3 4 5" data-val-gt="1 2 3 4" data-val-lte="10 9 8 7 6 5" data-val-lt="10 9 8 7 6">5</li>
	<li data-val-eq="6" data-val-gte="1 2 3 4 5 6" data-val-gt="1 2 3 4 5" data-val-lte="10 9 8 7 6" data-val-lt="10 9 8 7">6</li>
	<li data-val-eq="7" data-val-gte="1 2 3 4 5 6 7" data-val-gt="1 2 3 4 5 6" data-val-lte="10 9 8 7" data-val-lt="10 9 8">7</li>
	<li data-val-eq="8" data-val-gte="1 2 3 4 5 6 7 8" data-val-gt="1 2 3 4 5 6 7" data-val-lte="10 9 8" data-val-lt="10 9">8</li>
	<li data-val-eq="9" data-val-gte="1 2 3 4 5 6 7 8 9" data-val-gt="1 2 3 4 5 6 7 8" data-val-lte="10 9" data-val-lt="10">9</li>
	<li data-val-eq="10" data-val-gte="1 2 3 4 5 6 7 8 9 10" data-val-gt="1 2 3 4 5 6 7 8 9" data-val-lte="10" data-val-lt="">10</li>
</ul>

2. Using [attribute~=value] selectors

With those extra data-* attributes in place, we can now make good use of [attribute~=value] selectors:

• Say we want to select all items that are greater than 8. To do so we select all items where [data-val-gt] contains the value 8.
  → In CSS: [data-val-gt~=8].
• Say we want to select all items that are less than or equal 4. To do so we select all items where [data-val-lte] contains the value 4.
  → In CSS: [data-val-lte~=4].
• Say we want to select all items that are between 5 and 9. To do so we select all items where [data-val-gt] contains the value 5 and [data-val-lt] contains the value 9.
  → In CSS: [data-val-gt~=5][data-val-lt~=9].
• …

~

Demo

Here’s a demo pen which puts it all together:

See the Pen CSS attribute value less than / greater than / equals by Bramus! (@bramus) on CodePen.