selector-checker v0.9.2

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

Combinators

Pseudo-Classes

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