Content based CSS: -math-*

This is a second in a series of posts about how Hitch allows you to write CSS rules on more than just standard selectors.

With HTML there are many occasions where data is provided in the form of attributes to elements. This way of providing meta information about the markup has been generally only useable by JavaScript. CSS has yet to provide clear and simple ways to use this information for presentation.

Imagine you have the following markup containing HTML data-* attributes with numerical values:

<div data-level="5">Shekhar</div>
<div data-level="1">Willie</div>
<div data-level="10">Brian</div>
<div data-level="15">Clint</div>

This seems like a pretty trivial way of providing some meta-data to each element. How might you style these elements directly with CSS?

Imagine we want to be able to style these elements based on the numerical values of those attributes so that:

  • a level of 1-4 should be red
  • a level of 5-9 should be orange
  • a level of 10-14 should be blue
  • a level of 15 and higher should be green

So let’s try to write CSS to achieve this. CSS provides attribute selectors, however, it treats attributes as strings. We could potentially write some very convoluted rules like:

div[data-level=4]{ color: red; }

That’s about the best you can do really, and it isn’t imaginable you could (or would) do that with numbers that were very big (like 1-100). Even this, extremely simple example, looks like it would turn into a lot of work.

Luckily, there’s a Hitch for that! All you need to do is require it at the top of your Hitch-enabled CSS:



Now we can solve this problem in CSS, with normal rules:

div{ color: red; }
div:-math-greaterthan(data-level,4){ color: orange; }
div:-math-greaterthan(data-level,10){ color: blue; }
div:-math-greaterthan(data-level,14){ color: green; }


Let’s add a border to all data-level less than 12:

div:-math-lessthan(data-level, 12){ border: solid 1px gray; }

Awesome! Now what if we wanted to only color the element that had the least value, or maybe the greatest among the siblings?

-math-greatest(), -math-least()

div:-math-greatest(data-level){ color: yellow; }
div:-math-least(data-level){ color: white; }

These rules have the ability to find the greatest/least value in the data-level attribute of all the DIV elements and styling them accordingly.

Doesn’t that feel better? Take a look at Hitch for more expressive CSS!

Note: Hitch is a rather new project. It has amazing potential and also a few things yet to be built. It’s open sourced and available on Github: Fork it. Change how CSS works!