https://github.com/mootools/slick

Standalone CSS Selector Parser and Engine. An official MooTools project.
https://github.com/mootools/slick

Last synced: about 1 month ago
JSON representation

Standalone CSS Selector Parser and Engine. An official MooTools project.

• Host: GitHub
• URL: https://github.com/mootools/slick
• Owner: mootools
• License: mit
• Fork: true (subtleGradient/slick)
• Created: 2009-10-30T19:50:57.000Z (about 15 years ago)
• Default Branch: master
• Last Pushed: 2018-10-06T18:31:30.000Z (about 6 years ago)
• Last Synced: 2024-08-03T09:07:12.414Z (4 months ago)
• Language: HTML
• Homepage:
• Size: 2.86 MB
• Stars: 150
• Watchers: 23
• Forks: 22
• Open Issues: 39
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.txt

Awesome Lists containing this project

• awesome-github-star - slick

README

        
(Slick is an official [MooTools](http://mootools.net) project)

Slick

=====

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.

---

Slick Selector Engine

=====================

Usage

-----

### `search` context for selector

Search this context for any nodes that match this selector.

Expects: 

* context: document or node or array of documents or nodes

* selector: String or SelectorObject

* (**optional**) append: Array or Object with a push method

Returns: append argument or Array of 0 or more nodes

	Slick.search(document, "#foo > bar.baz") → [, , ]

	Slick.search([
, 
], "li > a") → [, , ]

	Slick.search(document, "#foo > bar.baz", { push:function(){} }) → { push:function(){}, 0:, 1:, 2: }


### `find` first in context with selector or null

Find the first node in document that matches selector or null if none are found.

Expects:

* context: document or node or array of documents or nodes

* selector: String or SelectorObject

Returns: Element or null

	Slick.find(document, "#foo > bar.baz") → 

	Slick.find(node, "#does-not-exist") → null

### node `match` selector?

Does this node match this selector?

Expects:

* node

* node, String or SelectorObject

Returns: true or false

	Slick.match(
, "div.rocks") → true

	Slick.match(
, "div.rocks") → false

	Slick.match(
, 
) → false


### context `contains` node?

Does this context contain this node? Is the context a parent of this node?

Expects:

* context: document or node

* node: node

Returns: true or false

	Slick.contains(
, 
) → true

	Slick.contains(, ) → false


---

Slick CSS Selector Parser

=========================

Parse a CSS selector string into a JavaScript object

----------------------------------------------------

Usage

-----

### `parse` selector into object

Parse a CSS Selector String into a Selector Object.

Expects: String

Returns: SelectorObject

	Slick.parse("#foo > bar.baz") → SelectorObject

SelectorObject format

---------------------

### `#foo > bar.baz`

	{

		"raw":"#foo > bar.baz",

		"expressions": [[

			{ "combinator":" ", "tag":"*", "id":"foo" },

			{ "combinator":">", "tag":"bar", "classList": ["baz"], "classes": [{"value":"baz", "regexp":RegExp }]}

		]]

	}

### `h1, h2, ul > li, .things`

	{

		"raw": "h1, h2, ul > li, .things",

		"expressions": [

			[{ "combinator":" ", "tag": "h1" }],

			[{ "combinator":" ", "tag": "h2" }],

			[{ "combinator":" ", "tag": "ul" }, { "combinator": ">", "tag": "li" }],

			[{ "combinator":" ", "tag": "*", "classList": ["things"], "classes": [{"value": "things", "regexp":RegExp }] }]

		]

	}