Gzipped and Cached CDN:
package:bkardell.math/1
Original VCS Code:
https://raw.github.com/gist/1600748/6e3bf13624555c5acbdccb642830af66306e7f46

Math pseudo-class filters

Math psudeo-classes provide a mechanism to select elements based on the numerical qualities of one of their attributes.

Table of Contents

  1. :-math-greaterthan
  2. :-math-lessthan
  3. :-math-greatest
  4. :-math-least

1. The -math-greaterthan pseudo-class

The greaterthan pseudo class :-math-greaterthan(attributeName,value), is a funtional notation taking two arguments, the argument name to test and the value to test against. It represents an element whose attribute is greater than the numeric value provided.

Examples:

The following selector matches all div elements in an HTML document with a data-donation attribute with a numeric value less than 100 and makes their font bold:

div:-math-greaterthan(data-donation, 100){
	font-weight: bold;
}

2. The -math-lessthan pseudo-class

The lessthan pseudo class :-math-lessthan(attributeName,value), is a funtional notation taking two arguments, the argument name to test and the value to test against. It represents an element whose attribute is less than the numeric value provided.

Examples:

The following selector matches all div elements in an HTML document with a data-highscore attribute with a numeric value less than 10000 and makes their color blue:

div:-math-lessthan(data-highscore, 10000){
	color: blue;
}

3. The -math-greatest pseudo-class

The greatest pseudo class :-math-greatest(attributeName), is a funtional notation taking one argument, the argument name to test. It represents a an element whose attribute is greater than those of all of its siblings.

Examples:

The following selector matches the div element whose data-score attribute has the greatest value among its siblings makes its background yellow:

div:-math-greatest(data-score){
	background-color: yellow;
}

Given the following html, the rule above would make background of the third div yellow:

<div data-score="10000">Clint</div>
<div data-score="8000">Shekhar</div>
<div data-score="12000">Brian</div>
<div data-score="7450">Joe</div>
		

4. The -math-least pseudo-class

The least pseudo class :-math-least(attributeName), is a funtional notation taking one argument, the argument name to test. It represents a an element whose attribute is lesser than those of all of its siblings.

Examples:

The following selector matches the div element whose data-score attribute has the least value among its siblings makes its background red:

div:-math-least(data-score){
	background-color: yellow;
}

Given the following html, the rule above would make background of the fourth div red:

<div data-score="10000">Clint</div>
<div data-score="8000">Shekhar</div>
<div data-score="12000">Brian</div>
<div data-score="7450">Joe</div>