selector-checker

Module for fast element to selector matching (with custom :hover, :focus etc. handing)

What does this repo about

The SelectorChecker allows to match a specified DOM element with target css selector.

This module should be useful in cases when you need to handle, force or manipulate a custom hover, focus, active or visited states.

How to use

Basic Example

The following example illustrates the principle the SelectorChecker.checkAll method

checker = new SelectorChecker();
element = document.getElementById("target"); //=> <h1 class="heading-1">...</h1>
matches = checker.checkAll(element, "div, h1");
matches   //=> true

Methods

SelectorChecker has a set of different methods you can find to be useful.

check(element, selector, stateMap);

Check if specified element matches target css selector

checker = new SelectorChecker();
element = document.getElementById("target"); //=> <h1 class="heading-1">...</h1>
matches = checker.check(element, "h1");
matches   //=> true

checkAll(element, multipleSelector, stateMap);

Check if specified element matches target multiple css selector

checker = new SelectorChecker();
element = document.getElementById("target"); //=> <h1 class="heading-1">...</h1>
matches = checker.checkAll(element, "div, h1");
matches   //=> true

How a StateMap works

A StateMap is a plain object of following structure:

var stateMap = {
    ":hover": [elem1, elem2, elemN],
    ":focus": [elem1, elem2, elemN],
    ":active": [elem1, elem2, elemN],
    ":visited": [elem1, elem2, elemN]
}

An approach with a stateMap instead of default browser behavior will be usefull in cases when you need to handle, force or manipulate a custom hover, focus, active or visited states.

Links which are not in array of :visited state will automatically match :link pseudo-class.

CSS Identifiers support table

Selector Checker is supporting the set of following css identifiers so far:

Basic Selectors

Category	Example	Supports
Type Selectors	div, section	Yes
Class Selectors	.post, .btn	Yes
ID Selectors	#page, #element	Yes
Universal Selectors	*	Yes
Universal Namespaces	ns|* *|*	No
Attribute Selectors	[attr operator value]	Yes

Combinators

Category	Example	Supports
Adjacent sibling selectors	A + B	Yes
Child selectors	A > B	Yes
Descendant selectors	A B	Yes
General sibling selectors	A ~ B	Yes

Pseudo-Classes

Category	Example	Supports
Active	:active	Yes (via StateMap)
Checked	:checked	Yes
Disabled	:disabled	Yes
Empty	:empty	Yes
Enabled	:enabled	Yes
First Child	:first-child	Yes
First Of Type	:first-of-type	Yes
Focus	:focus	Yes (via StateMap)
Hover	:hover	Yes (via StateMap)
Indeterminate	:indeterminate	Yes
In Range	:in-range	Yes
Invalid	:invalid	Yes
Last Child	:last-child	Yes
Last Of Type	:last-of-type	Yes
Lang	:lang	Yes
Link	:link	Yes (via StateMap)
Not	:not	Yes
Nth Child	:nth-child	Yes
Nth Last Child	:nth-last-child	Yes
Nth Of Type	:nth-of-type	Yes
Nth Last Of Type	:nth-last-of-type	Yes
Only Child	:only-child	Yes
Only Of Type	:only-of-type	Yes
Optional	:optional	Yes
Out Of Range	:out-of-range	Yes
Read Only	:read-only	Yes
Read Write	:read-write	Yes
Required	:required	Yes
Root	:root	Yes
Target	:target	Yes
Valid	:valid	Yes
Visited	:visited	Yes (via StateMap)
Any	:any	No
Dir	:dir()	No
Default	:default	No
First	:first	No
Fullscreen	:fullscreen	No
Scope	:scope	No

Building

npm install

Development and Testing

• npm run gulp will launch dist building
• npm run watch will launch a watcher for dist building
• npm run test will launch unit-test building
• npm run test-watch will launch a watcher for unit-test building

License

It's all about MIT stuff. (C) 2017 Eugene Ford