Fast and lightweight querySelector[All]/getElementsByClassName/matchesSelector
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

Super fast css selector engine with CSS4 selector API support


  • Support CSS3 as well as part of CSS4 selector API
  • Be lightweight
  • Be fastest
  • Be customizable
  • Optimised for IE < 8


  • document.querySelector
  • document.querySelectorAll
  • document.getElementsByClassName for IE < 9
  • document.documentElement.querySelector
  • document.documentElement.querySelectorAll
  • document.documentElement.getElementsByClassName
  • document.documentElement.matchesSelector
  • document.documentElement.matches
  • Element.prototype.querySelector
  • Element.prototype.querySelectorAll
  • Element.prototype.getElementsByClassName for IE < 9
  • Element.prototype.matchesSelector
  • Element.prototype.matches

CSS4 Supporting selectors

Subject of a selector

document.querySelector("div! a[href*=twitter]");// div that has **a** element with _href_ attribute that contains "twitter"
document.querySelectorAll("body footer! div");// NodeList:[footer], if <footer> is in <body> and <footer> contains <div>

:scope pseudo-class

<div node>.querySelector("div:scope a");// if <div node>.tagName == "DIV" -> result is <a> element, child of <div node>
<node>.querySelectorAll(":scope>*");// all direct childs or <node>
document.documentElement.querySelector(":scope>*");// regulary would be <head>
document.documentElement.querySelector(":scope>*:nth-child(2n+1)");// regulary would be <head> also
document.documentElement.querySelector(":scope>*:nth-child(2n+2)");// regulary would be <body>

Note: :scope pseudo-class not in first compound selector not supported! This examples will throw "SYNTAX_ERR" exception:

document.querySelector("div div:scope a")

Reference combination

Working on it


  • Without IE6/7 support:

         <script src="__COMPILED/CSS_selector_engine.js"></script>
  • With IE6/7 support:

         <!--[if lt IE 8]>
     	<script src="__COMPILED/CSS_selector_engine.ielt8.js"></script>
     	<!--[if gt IE 7]><!-->
     	<script src="__COMPILED/CSS_selector_engine.js"></script>

Using in IE < 8

var $$ = function(node, selector) {
    return, selector)
var $$0 = function(node, selector) {
    return, selector)
var matchNode = function(node, selector) {
    return, selector)

matchNode( $$(document, "div.class")[0], "div.class" ) == true


The are few GGC flags in script. You can set it as you need and compile script with GGC in ADVANCED_OPTIMIZATIONS mode.

  • Build for non-IE lt 8

    set the value of '__GCC__NOT_ONLY_IELT8_SUPPORT__' to 'true' and compile CSS_selector_engine.js using Google Closure Compiler