kassens / slick

slick CSS selectors for javascript—now triple teh aswome

MooTools Slick Selector Engine

A new standalone selector engine that is totally slick!

Create your own custom pseudo-classes!

Ever want to make your own :my-widget(rocks) pseudoclass? Now you can!

Use your own custom getAttribute code!

EG: Use MooTool's Element.get method or jQuery's $.attr

Use your own parser!

Want to support XPATH selectors? JSONPath selectors? Pre-cached JS Object selctors? Just swap out the default parser and make your own.

Use the parser by itself!

Want to integrate a CSS3 Selector parser into your own app somehow? Use the slick selector CSS3 parser by itself and get a JS Object representation of your selector.

MooTools Slick CSS Selector Parser

Parse a CSS selector string into a JavaScript object

Object format

{
	Slick: true,
	reverse: function(){},
	simple: false,
	length: 1,
	raw: "tag#id.class[attrib][attrib=attribvalue]:pseudo:pseudo(pseudovalue):not(pseudovalue)",
	expressions: [
		[
			{
				parts: [
					{ type: "class",                    value: "class", regexp: /regexp/ },
					{ type: "attribute", key: "attrib",                                      test: function(){} },
					{ type: "attribute", key: "attrib", value: "attribvalue", operator: "=", test: function(){} },
					{ type: "pseudo",    key: "pseudo" },
					{ type: "pseudo",    key: "pseudo", value: "pseudovalue" },
					{ type: "pseudo",    key: "not"   , value: "pseudovalue" }
				],
				tag: "tag",
				id: "id",
				classes: [
					"class"
				],
				attributes: [
					{ type: "attribute", key: "attrib", value: "",                           test: function(){} },
					{ type: "attribute", key: "attrib", value: "attribvalue", operator: "=", test: function(){} }
				],
				pseudos: [
					{ type: "pseudo", key: "pseudo" },
					{ type: "pseudo", key: "pseudo", value: "pseudovalue" },
					{ type: "pseudo", key: "not",    value: "pseudovalue" }
				],
				combinator: " "
			}
		]
	]
}