Selectory

JavaScript Tests for CSS Selectors

Selectory is a CSS reprocessor that resolves selectors using JS. This plugin will read CSS selectors that end with a [test] attribute and use JavaScript to determine whether or not to apply that style to elements matching the other part of that selector. For example, the JS test 1 == 1 will always resolve to true, so a selector written for div[test="1 == 1"] {} will always apply to each div element.

By default, Selectory will reprocess selectors by watching the following events:

To run Selectory whenever you want, use the selectory.load() function in JS.

Other things you can do with Selectory include:

Apply a rule to a div when it is wider than 300px:

div[test="this.offsetWidth > 300"] {
  background: orange;
}

Apply a rule to an input when its value="" attribute is greater than 30:

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

Apply a rule to an input when it has a value="" attribute zero characters long:

input[test="this.value.length == 0"] {
  background: purple;
}

Apply a rule to an input when its value="" attribute is more than 5 characters long:

input[test="5 < this.value.length"] {
  background: turquoise;
}

Apply a rule to an h3 element when it contains at least one span element:

h3[test="(this.querySelector('span'))"] {
  color: red;
}

It is limited what selectors you can use with Selectory, things like :hover and pseudo-classes tend not to work as well. As well the parsing only allows for 1 test per selector, and complex selectors may not work as intended. Using selector[test=""] {} with a simple selector is best.

Techniques Capable