0.9.2 • Public • Published


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


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


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


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


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


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

Package Sidebar


Weekly Downloads






Last publish


  • eugeneford