Sizzle 1.7.2 vs 1.8

JavaScript performance comparison

Revision 4 of this test case created by Timmy Willison and last updated

Preparation code

<script>
    document.querySelectorAll = null;
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
var Sizzle1_7_2 = jQuery.noConflict().find;
</script>
<script src="https://code.jquery.com/jquery-git.js"></script>
<script>
var Sizzle1_8 = jQuery.noConflict().find;
</script>



<div id="root">
  <div class="header">
    <h3>CSS 3 Selectors tests</h3>
    <p>(c) <a href="http://www.disruptive-innovations.com">Disruptive Innovations</a> 2008<br/>
    Last update: 2008-06-06</p>
  </div>

  <div class="test target">
    <div class="unitTest" id="target" title=":target selector"></div>
  </div>

  <div class="test">
    <div class="blox1 unitTest" title="childhood selector"></div>
  </div>

  <div class="test attributeExistence">
    <div class="blox2 unitTest" align="center" title="attribute existence selector"></div>
    <div class="blox3 unitTest" align="" title="attribute existence selector with empty string value"></div>
    <div class="blox4 unitTest" valign="center" title="attribute existence selector with almost identical attribute"></div>
    <div class="blox5 unitTest" alignv="center" title="attribute existence selector with almost identical attribute"></div>
  </div>

  <div class="test attributeValue">
    <div class="blox6 unitTest" align="center" title="attribute value selector"></div>
    <div class="blox6 unitTest" foo="&eacute;" title="attribute value selector with an entity in the attribute and an escaped value in the selector"></div>
    <div class="blox6 unitTest" _foo="&eacute;" title="attribute value selector with an entity in the attribute, an escaped value in the selector, and a leading underscore in the attribute name"></div>
  </div>

  <div class="test attributeSpaceSeparatedValues">
    <div class="blox7 foo unitTest" title="[~=] attribute selector"></div>
    <div class="blox8 unitTest" title="[~=] attribute selector looking for empty string"></div>
    <div class="blox9 unitTest" foo="" title="[~=] attribute selector looking for empty string in empty attribute"></div>
    <div class="blox10 unitTest" foo="foobar" title="[~=] attribute selector looking for 'foo' in 'foobar'"></div>
  </div>

  <div class="test attrStart">
    <div class="unitTest t1" title="[^=] attribute selector"></div>
    <div class="unitTest t2" title="[^=] attribute selector"></div>
    <div class="unitTest t3" align="center" title="[^=] attribute selector looking for empty string"></div>
    <div class="unitTest t4" foo="&eacute;tagada" title="[^=] attribute selector looking for &eacute;"></div>
  </div>

  <div class="test attrEnd">
    <div class="unitTest t1" title="[$=] attribute selector"></div>
    <div class="unitTest t2" title="[$=] attribute selector"></div>
    <div class="unitTest t3" align="center" title="[$=] attribute selector looking for empty string"></div>
    <div class="unitTest t4" foo="tagada&eacute;" title="[$=] attribute selector looking for &eacute;"></div>
  </div>

  <div class="test attrMiddle">
    <div class="unitTest t1" title="[*=] attribute selector"></div>
    <div class="unitTest t2" title="[*=] attribute selector"></div>
    <div class="unitTest t3" align="center" title="[*=] attribute selector looking for empty string"></div>
    <div class="unitTest t4" foo="tagada&eacute;foo" title="[*=] attribute selector looking for &eacute;"></div>
  </div>

  <div class="test firstChild">
    <div class="unitTest" title=":first-child selector"></div>
    <div class="blox12 unitTest" title=":first-child selector should not match non first child"></div>
    <div class="blox13 unitTest" title=":first-child selector should not match non first child"></div>
  </div>

  <div class="test not">
    <div class="blox14 unitTest" title="negation pseudo-class with argument being an element type selector"></div>
    <div class="blox15 unitTest" foo="blox15" title="negation pseudo-class with argument being an attribute selector"></div>
    <div class="blox16 unitTest" foo="blox15" title="negation pseudo-class accepts only simple selectors for argument"></div>
  </div>

  <div class="test onlyOfType">
    <div class="blox17 unitTest" title=":only-of-type selector"></div>
    <p class="blox18 unitTest" title="negated :only-of-type selector"></p>
    <p class="blox18 unitTest" title="negated :only-of-type selector"></p>
  </div>

  <div class="test nthchild1">
    <div class="unitTest" title=":nth-child(odd) selector"></div>
    <div class="unitTest" title=":nth-last-child(odd) selector"></div>
    <div class="unitTest" title=":nth-child(odd) selector"></div>
    <div class="unitTest" title=":nth-last-child(odd) selector"></div>
    <div class="unitTest" title=":nth-child(odd) selector"></div>
    <div class="unitTest" title=":nth-last-child(odd) selector"></div>
  </div>
  <div class="test nthchild2">
    <div class="unitTest" title=":nth-last-child(even) selector"></div>
    <div class="unitTest" title=":nth-child(even) selector"></div>
    <div class="unitTest" title=":nth-last-child(even) selector"></div>
    <div class="unitTest" title=":nth-child(even) selector"></div>
    <div class="unitTest" title=":nth-last-child(even) selector"></div>
    <div class="unitTest" title=":nth-child(even) selector"></div>
  </div>
  <div class="test nthchild3">
    <div class="unitTest no" title=":nth-last-child(3n+3) selector"></div>
    <div class="unitTest" title=":nth-child(3n+2) selector"></div>
    <div class="unitTest no" title=":nth-last-child(3n+1) selector"></div>
    <div class="unitTest no" title=":nth-last-child(3n+3) selector"></div>
    <div class="unitTest" title=":nth-child(3n+2) selector"></div>
    <div class="unitTest no" title=":nth-last-child(3n+1) selector"></div>
  </div>

  <div class="test nthoftype1">
    <div class="unitTest" title=":nth-of-type(odd) selector"></div>
    <p class="unitTest" title=":nth-* selector"></p>
    <p class="unitTest" title=":nth-* selector"></p>
    <div class="unitTest" title=":nth-last-of-type(odd) selector"></div>
    <p class="unitTest" title=":nth-* selector"></p>
    <div class="unitTest" title=":nth-of-type(odd) selector"></div>
    <div class="unitTest" title=":nth-last-of-type(odd) selector"></div>
  </div>
  <div class="test nthoftype2">
    <div class="unitTest" title=":nth-last-of-type(even) selector"></div>
    <p class="unitTest" title=":nth-* selector"></p>
    <p class="unitTest" title=":nth-* selector"></p>
    <div class="unitTest" title=":nth-of-type(even) selector"></div>
    <p class="unitTest" title=":nth-* selector"></p>
    <div class="unitTest" title=":nth-last-of-type(even) selector"></div>
    <div class="unitTest" title=":nth-of-type(even) selector"></div>
  </div>
  <div class="test nthoftype3">
    <div class="unitTest" title=":nth-of-type(3n+1) selector"></div>
    <p class="unitTest" title=":nth-* selector"></p>
    <p class="unitTest" title=":nth-* selector"></p>
    <div class="unitTest" title=":nth-last-of-type(3n+2) selector"></div>
    <p class="unitTest" title=":nth-* selector"></p>
    <div class="unitTest" title=":nth-last-of-type(3n+1) selector"></div>
    <div class="unitTest" title=":nth-of-type(3n+1) selector"></div>
    <p class="unitTest" title=":nth-* selector"></p>
    <div class="unitTest" title=":nth-last-of-type(3n+2) selector"></div>
    <div class="unitTest" title=":nth-last-of-type(3n+1) selector"></div>
  </div>

  <div class="test lastChild">
    <p class="unitTest" title=":not(:last-child) selector"></p>
    <div class="unitTest" title=":last-child selector"></div>&nbsp;
  </div>

  <div class="test firstOfType">
    <p class="unitTest" title=":first-of-type selector"></p>
    <div class="unitTest" title=":first-of-type selector"></div>
    <p class="unitTest" title=":not(:first-of-type)"></p>
    <div class="unitTest" title=":not(:first-of-type)"></div>
  </div>

  <div class="test lastOfType">
    <p class="unitTest" title=":not(:last-of-type)"></p>
    <div class="unitTest" title=":not(:last-of-type)"></div>
    <p class="unitTest" title=":last-of-type selector"></p>
    <div class="unitTest" title=":last-of-type selector"></div>
  </div>

  <div class="test onlyChild">
    <div class="unitTest" title=":only-child where the element is NOT the only child"></div>
    <div class="unitTest" title=":only-child where the element is the only child">
      <div class="unitTest" title=":only-child where the element is the only child"></div>
    </div>
  </div>

  <div class="test onlyOfType">
    <p class="unitTest" title=":only-of-type"></p>
    <div class="unitTest" title=":only-of-type">
      <div class="unitTest" title=":only-of-type"></div>
    </div>
    <div class="unitTest" title=":not(only-of-type)"></div>
  </div>

  <div class="test empty">
    <div class="unitTest isEmpty" title=":empty with empty element"></div>
    <div class="unitTest isNotEmpty" title=":empty but element contains a whitespace"> </div>
    <div class="unitTest isEmpty" title=":empty and element contains an SGML comment"><!-- foo --></div>
    <div class="unitTest isNotEmpty" title=":empty but element contains a SPAN element"><span></span></div>
    <div class="unitTest isNotEmpty" title=":empty but element contains an entity reference">&nbsp;</div>
  </div>

  <div class="test lang">
    <div id="nofragment" class="unitTest" title=":lang() where language comes from the document"></div>
    <div class="unitTest" lang="fr" title=":lang() where language comes from the element"></div>
    <div class="unitTest" lang="en-US" title=":lang() where language comes from the element but is a dialect of the language queried"></div>
    <div class="unitTest t1" lang="es" title=":lang() where language comes from the element but the language queried is a dialect of the element's one so it should not match"></div>
  </div>

  <div class="test attrLang">
    <div class="unitTest t1" title="[|=] where language comes from the document"></div>
    <div class="unitTest" lang="fr" title="[|=] where language comes from the element"></div>
    <div class="unitTest t2" lang="en-US" title="[|=] where language comes from the element but is a dialect of the language queried"></div>
    <div class="unitTest t3" lang="es" title="[|=] where language comes from the element but the language queried is a dialect of the element's one so it should not match"></div>
  </div>

  <div class="test UI">
    <button name="submit" type="submit" value="submit" class="t1"  title=":enabled pseudo-class"><div class="unitTest"></div></button>
    <button name="submit" type="submit" value="submit" class="t2" disabled="true"  title=":enabled pseudo-class"><div class="unitTest"></div></button>
  </div>
  <div class="test UI">
    <input class="t3" type="checkbox" checked="true"/><div class="unitTest" title=":checked"></div>
    the previous square should be green when the checkbox is checked and become red when you uncheck it
  </div>
  <div class="test UI">
    <input class="t4" type="checkbox"/><div class="unitTest" title=":not(:checked)"></div>
    the previous square should be green when the checkbox is NOT checked and become red when you check it
  </div>

  <div class="test tilda">
    <div class="unitTest t1" title="~ combinator"></div>
    <div class="unitTest" title="~ combinator"></div>
    <div class="unitTest" title="~ combinator"></div>
    <div class="unitTest" title="~ combinator"></div>
    <span style="float:left">the three last squares should be green and become red when the pointer hovers over the white square</span>
  </div>
  <div class="test plus">
    <div class="unitTest t1" title="+ combinator"></div>
    <div class="unitTest t2" title="+ combinator"></div>
    <div class="unitTest" title="+ combinator"></div>
    <span style="float:left">the last square should be green and become red when the pointer hovers over the FIRST white square</span>
  </div>
</div>
<div id="root2">
  <div class="header">
    <h3>CSS 3 Selectors tests</h3>
    <p>(c) <a href="http://www.disruptive-innovations.com">Disruptive Innovations</a> 2008<br/>
    Last update: 2008-06-06</p>
  </div>

  <div class="test">
    <div class="blox1 unitTest" title="childhood selector"></div>
  </div>

  <div class="test attributeExistence">
    <div class="blox2 unitTest" align="center" title="attribute existence selector"></div>
    <div class="blox3 unitTest" align="" title="attribute existence selector with empty string value"></div>
    <div class="blox4 unitTest" valign="center" title="attribute existence selector with almost identical attribute"></div>
    <div class="blox5 unitTest" alignv="center" title="attribute existence selector with almost identical attribute"></div>
  </div>

  <div class="test attributeValue">
    <div class="blox6 unitTest" align="center" title="attribute value selector"></div>
    <div class="blox6 unitTest" foo="&eacute;" title="attribute value selector with an entity in the attribute and an escaped value in the selector"></div>
    <div class="blox6 unitTest" _foo="&eacute;" title="attribute value selector with an entity in the attribute, an escaped value in the selector, and a leading underscore in the attribute name"></div>
  </div>

  <div class="test attributeSpaceSeparatedValues">
    <div class="blox7 foo unitTest" title="[~=] attribute selector"></div>
    <div class="blox8 unitTest" title="[~=] attribute selector looking for empty string"></div>
    <div class="blox9 unitTest" foo="" title="[~=] attribute selector looking for empty string in empty attribute"></div>
    <div class="blox10 unitTest" foo="foobar" title="[~=] attribute selector looking for 'foo' in 'foobar'"></div>
  </div>

  <div class="test attrStart">
    <div class="unitTest t1" title="[^=] attribute selector"></div>
    <div class="unitTest t2" title="[^=] attribute selector"></div>
    <div class="unitTest t3" align="center" title="[^=] attribute selector looking for empty string"></div>
    <div class="unitTest t4" foo="&eacute;tagada" title="[^=] attribute selector looking for &eacute;"></div>
  </div>

  <div class="test attrEnd">
    <div class="unitTest t1" title="[$=] attribute selector"></div>
    <div class="unitTest t2" title="[$=] attribute selector"></div>
    <div class="unitTest t3" align="center" title="[$=] attribute selector looking for empty string"></div>
    <div class="unitTest t4" foo="tagada&eacute;" title="[$=] attribute selector looking for &eacute;"></div>
  </div>

  <div class="test attrMiddle">
    <div class="unitTest t1" title="[*=] attribute selector"></div>
    <div class="unitTest t2" title="[*=] attribute selector"></div>
    <div class="unitTest t3" align="center" title="[*=] attribute selector looking for empty string"></div>
    <div class="unitTest t4" foo="tagada&eacute;foo" title="[*=] attribute selector looking for &eacute;"></div>
  </div>

  <div class="test firstChild">
    <div class="unitTest" title=":first-child selector"></div>
    <div class="blox12 unitTest" title=":first-child selector should not match non first child"></div>
    <div class="blox13 unitTest" title=":first-child selector should not match non first child"></div>
  </div>

  <div class="test not">
    <div class="blox14 unitTest" title="negation pseudo-class with argument being an element type selector"></div>
    <div class="blox15 unitTest" foo="blox15" title="negation pseudo-class with argument being an attribute selector"></div>
    <div class="blox16 unitTest" foo="blox15" title="negation pseudo-class accepts only simple selectors for argument"></div>
  </div>

  <div class="test onlyOfType">
    <div class="blox17 unitTest" title=":only-of-type selector"></div>
    <p class="blox18 unitTest" title="negated :only-of-type selector"></p>
    <p class="blox18 unitTest" title="negated :only-of-type selector"></p>
  </div>

  <div class="test nthchild1">
    <div class="unitTest" title=":nth-child(odd) selector"></div>
    <div class="unitTest" title=":nth-last-child(odd) selector"></div>
    <div class="unitTest" title=":nth-child(odd) selector"></div>
    <div class="unitTest" title=":nth-last-child(odd) selector"></div>
    <div class="unitTest" title=":nth-child(odd) selector"></div>
    <div class="unitTest" title=":nth-last-child(odd) selector"></div>
  </div>
  <div class="test nthchild2">
    <div class="unitTest" title=":nth-last-child(even) selector"></div>
    <div class="unitTest" title=":nth-child(even) selector"></div>
    <div class="unitTest" title=":nth-last-child(even) selector"></div>
    <div class="unitTest" title=":nth-child(even) selector"></div>
    <div class="unitTest" title=":nth-last-child(even) selector"></div>
    <div class="unitTest" title=":nth-child(even) selector"></div>
  </div>
  <div class="test nthchild3">
    <div class="unitTest no" title=":nth-last-child(3n+3) selector"></div>
    <div class="unitTest" title=":nth-child(3n+2) selector"></div>
    <div class="unitTest no" title=":nth-last-child(3n+1) selector"></div>
    <div class="unitTest no" title=":nth-last-child(3n+3) selector"></div>
    <div class="unitTest" title=":nth-child(3n+2) selector"></div>
    <div class="unitTest no" title=":nth-last-child(3n+1) selector"></div>
  </div>

  <div class="test nthoftype1">
    <div class="unitTest" title=":nth-of-type(odd) selector"></div>
    <p class="unitTest" title=":nth-of-* selector"></p>
    <p class="unitTest" title=":nth-of-* selector"></p>
    <div class="unitTest" title=":nth-last-of-type(odd) selector"></div>
    <p class="unitTest" title=":nth-of-* selector"></p>
    <div class="unitTest" title=":nth-of-type(odd) selector"></div>
    <div class="unitTest" title=":nth-last-of-type(odd) selector"></div>
  </div>
  <div class="test nthoftype2">
    <div class="unitTest" title=":nth-last-of-type(even) selector"></div>
    <p class="unitTest" title=":nth-of-* selector"></p>
    <p class="unitTest" title=":nth-of-* selector"></p>
    <div class="unitTest" title=":nth-of-type(even) selector"></div>
    <p class="unitTest" title=":nth-of-* selector"></p>
    <div class="unitTest" title=":nth-last-of-type(even) selector"></div>
    <div class="unitTest" title=":nth-of-type(even) selector"></div>
  </div>
  <div class="test nthoftype3">
    <div class="unitTest" title=":nth-of-type(3n+1) selector"></div>
    <p class="unitTest" title=":nth-of-* selector"></p>
    <p class="unitTest" title=":nth-of-* selector"></p>
    <div class="unitTest" title=":nth-last-of-type(3n+2) selector"></div>
    <p class="unitTest" title=":nth-of-* selector"></p>
    <div class="unitTest" title=":nth-last-of-type(3n+1) selector"></div>
    <div class="unitTest" title=":nth-of-type(3n+1) selector"></div>
    <p class="unitTest" title=":nth-of-* selector"></p>
    <div class="unitTest" title=":nth-last-of-type(3n+2) selector"></div>
    <div class="unitTest" title=":nth-last-of-type(3n+1) selector"></div>
  </div>

  <div class="test lastChild">
    <p class="unitTest" title=":not(:last-child) selector"></p>
    <div class="unitTest" title=":last-child selector"></div>&nbsp;
  </div>

  <div class="test firstOfType">
    <p class="unitTest" title=":first-of-type selector"></p>
    <div class="unitTest" title=":first-of-type selector"></div>
    <p class="unitTest" title=":not(:first-of-type)"></p>
    <div class="unitTest" title=":not(:first-of-type)"></div>
  </div>

  <div class="test lastOfType">
    <p class="unitTest" title=":not(:last-of-type)"></p>
    <div class="unitTest" title=":not(:last-of-type)"></div>
    <p class="unitTest" title=":last-of-type selector"></p>
    <div class="unitTest" title=":last-of-type selector"></div>
  </div>

  <div class="test onlyChild">
    <div class="unitTest" title=":only-child where the element is NOT the only child"></div>
    <div class="unitTest" title=":only-child where the element is the only child">
      <div class="unitTest" title=":only-child where the element is the only child"></div>
    </div>
  </div>

  <div class="test onlyOfType">
    <p class="unitTest" title=":only-of-type"></p>
    <div class="unitTest" title=":only-of-type">
      <div class="unitTest" title=":only-of-type"></div>
    </div>
    <div class="unitTest" title=":not(only-of-type)"></div>
  </div>

  <div class="test empty">
    <div class="unitTest isEmpty" title=":empty with empty element"></div>
    <div class="unitTest isNotEmpty" title=":empty but element contains a whitespace"> </div>
    <div class="unitTest isEmpty" title=":empty and element contains an SGML comment"><!-- foo --></div>
    <div class="unitTest isNotEmpty" title=":empty but element contains a SPAN element"><span></span></div>
    <div class="unitTest isNotEmpty" title=":empty but element contains an entity reference">&nbsp;</div>
  </div>

  <div class="test lang">
    <div id="nofragment" class="unitTest" title=":lang() where language comes from the document"></div>
    <div class="unitTest" lang="fr" title=":lang() where language comes from the element"></div>
    <div class="unitTest" lang="en-US" title=":lang() where language comes from the element but is a dialect of the language queried"></div>
    <div class="unitTest t1" lang="es" title=":lang() where language comes from the element but the language queried is a dialect of the element's one so it should not match"></div>
  </div>

  <div class="test attrLang">
    <div class="unitTest t1" title="[|=] where language comes from the document"></div>
    <div class="unitTest" lang="fr" title="[|=] where language comes from the element"></div>
    <div class="unitTest t2" lang="en-US" title="[|=] where language comes from the element but is a dialect of the language queried"></div>
    <div class="unitTest t3" lang="es" title="[|=] where language comes from the element but the language queried is a dialect of the element's one so it should not match"></div>
  </div>

  <div class="test UI">
    <button name="submit" type="submit" value="submit" class="t1"  title=":enabled pseudo-class"><div class="unitTest"></div></button>
    <button name="submit" type="submit" value="submit" class="t2" disabled="true"  title=":enabled pseudo-class"><div class="unitTest"></div></button>
  </div>
  <div class="test UI">
    <input class="t3" type="checkbox" checked="true"/><div class="unitTest" title=":checked"></div>
    the previous square should be green when the checkbox is checked and become red when you uncheck it
  </div>
  <div class="test UI">
    <input class="t4" type="checkbox"/><div class="unitTest" title=":not(:checked)"></div>
    the previous square should be green when the checkbox is NOT checked and become red when you check it
  </div>

  <div class="test tilda">
    <div class="unitTest t1" title="~ combinator"></div>
    <div class="unitTest" title="~ combinator"></div>
    <div class="unitTest" title="~ combinator"></div>
    <div class="unitTest" title="~ combinator"></div>
    <span style="float:left">the three last squares should be green and become red when the pointer hovers over the white square</span>
  </div>
  <div class="test plus">
    <div class="unitTest t1" title="+ combinator"></div>
    <div class="unitTest t2" title="+ combinator"></div>
    <div class="unitTest" title="+ combinator"></div>
    <span style="float:left">the last square should be green and become red when the pointer hovers over the FIRST white square</span>
  </div>
</div>
<div id="root3">
	<div id="svgs">
	<!-- svg elements, but in the xhtml namespace -->
	<svg width="12cm" height="4cm" viewBox="0 0 1200 400" version="1.1" id="svg1">
  	<desc id="desc1">Example circle01 - circle filled with red and stroked with blue</desc>
  	<rect id="rect1" x="1" y="1" width="1198" height="398" fill="none" stroke="blue" stroke-width="2"/>
  	<circle id="circle1" cx="600" cy="200" r="100" fill="red" stroke="blue" stroke-width="10"  />
	</svg>
	<!-- svg elements using svg: -->
	<svg:svg width="12cm" height="4cm" viewBox="0 0 1200 400" version="1.1" id="svg2">
  	<svg:desc id="desc2">Example circle01 - circle filled with red and stroked with blue</svg:desc>
  	<svg:rect id="rect2" x="1" y="1" width="1198" height="398" fill="none" stroke="blue" stroke-width="2"/>
  	<svg:circle id="circle2" cx="600" cy="200" r="100" fill="red" stroke="blue" stroke-width="10"  />
	</svg:svg>
	<!-- svg using an inline xmlns -->
	<svg width="12cm" height="4cm" viewBox="0 0 1200 400" xmlns="http://www.w3.org/2000/svg" version="1.1" id="svg3">
  	<desc id="desc3">Example circle01 - circle filled with red and stroked with blue</desc>
  	<rect id="rect3" x="1" y="1" width="1198" height="398" fill="none" stroke="blue" stroke-width="2"/>
  	<circle id="circle3" cx="600" cy="200" r="100" fill="red" stroke="blue" stroke-width="10"  />
	</svg>
	</div>
</div>
    

Preparation code output

<div id="root"> <div class="header"> <h3>CSS 3 Selectors tests</h3> <p>(c) <a href="http://www.disruptive-innovations.com">Disruptive Innovations</a> 2008<br/> Last update: 2008-06-06</p> </div> <div class="test target"> <div class="unitTest" id="target" title=":target selector"></div> </div> <div class="test"> <div class="blox1 unitTest" title="childhood selector"></div> </div> <div class="test attributeExistence"> <div class="blox2 unitTest" align="center" title="attribute existence selector"></div> <div class="blox3 unitTest" align="" title="attribute existence selector with empty string value"></div> <div class="blox4 unitTest" valign="center" title="attribute existence selector with almost identical attribute"></div> <div class="blox5 unitTest" alignv="center" title="attribute existence selector with almost identical attribute"></div> </div> <div class="test attributeValue"> <div class="blox6 unitTest" align="center" title="attribute value selector"></div> <div class="blox6 unitTest" foo="&eacute;" title="attribute value selector with an entity in the attribute and an escaped value in the selector"></div> <div class="blox6 unitTest" _foo="&eacute;" title="attribute value selector with an entity in the attribute, an escaped value in the selector, and a leading underscore in the attribute name"></div> </div> <div class="test attributeSpaceSeparatedValues"> <div class="blox7 foo unitTest" title="[~=] attribute selector"></div> <div class="blox8 unitTest" title="[~=] attribute selector looking for empty string"></div> <div class="blox9 unitTest" foo="" title="[~=] attribute selector looking for empty string in empty attribute"></div> <div class="blox10 unitTest" foo="foobar" title="[~=] attribute selector looking for 'foo' in 'foobar'"></div> </div> <div class="test attrStart"> <div class="unitTest t1" title="[^=] attribute selector"></div> <div class="unitTest t2" title="[^=] attribute selector"></div> <div class="unitTest t3" align="center" title="[^=] attribute selector looking for empty string"></div> <div class="unitTest t4" foo="&eacute;tagada" title="[^=] attribute selector looking for &eacute;"></div> </div> <div class="test attrEnd"> <div class="unitTest t1" title="[$=] attribute selector"></div> <div class="unitTest t2" title="[$=] attribute selector"></div> <div class="unitTest t3" align="center" title="[$=] attribute selector looking for empty string"></div> <div class="unitTest t4" foo="tagada&eacute;" title="[$=] attribute selector looking for &eacute;"></div> </div> <div class="test attrMiddle"> <div class="unitTest t1" title="[*=] attribute selector"></div> <div class="unitTest t2" title="[*=] attribute selector"></div> <div class="unitTest t3" align="center" title="[*=] attribute selector looking for empty string"></div> <div class="unitTest t4" foo="tagada&eacute;foo" title="[*=] attribute selector looking for &eacute;"></div> </div> <div class="test firstChild"> <div class="unitTest" title=":first-child selector"></div> <div class="blox12 unitTest" title=":first-child selector should not match non first child"></div> <div class="blox13 unitTest" title=":first-child selector should not match non first child"></div> </div> <div class="test not"> <div class="blox14 unitTest" title="negation pseudo-class with argument being an element type selector"></div> <div class="blox15 unitTest" foo="blox15" title="negation pseudo-class with argument being an attribute selector"></div> <div class="blox16 unitTest" foo="blox15" title="negation pseudo-class accepts only simple selectors for argument"></div> </div> <div class="test onlyOfType"> <div class="blox17 unitTest" title=":only-of-type selector"></div> <p class="blox18 unitTest" title="negated :only-of-type selector"></p> <p class="blox18 unitTest" title="negated :only-of-type selector"></p> </div> <div class="test nthchild1"> <div class="unitTest" title=":nth-child(odd) selector"></div> <div class="unitTest" title=":nth-last-child(odd) selector"></div> <div class="unitTest" title=":nth-child(odd) selector"></div> <div class="unitTest" title=":nth-last-child(odd) selector"></div> <div class="unitTest" title=":nth-child(odd) selector"></div> <div class="unitTest" title=":nth-last-child(odd) selector"></div> </div> <div class="test nthchild2"> <div class="unitTest" title=":nth-last-child(even) selector"></div> <div class="unitTest" title=":nth-child(even) selector"></div> <div class="unitTest" title=":nth-last-child(even) selector"></div> <div class="unitTest" title=":nth-child(even) selector"></div> <div class="unitTest" title=":nth-last-child(even) selector"></div> <div class="unitTest" title=":nth-child(even) selector"></div> </div> <div class="test nthchild3"> <div class="unitTest no" title=":nth-last-child(3n+3) selector"></div> <div class="unitTest" title=":nth-child(3n+2) selector"></div> <div class="unitTest no" title=":nth-last-child(3n+1) selector"></div> <div class="unitTest no" title=":nth-last-child(3n+3) selector"></div> <div class="unitTest" title=":nth-child(3n+2) selector"></div> <div class="unitTest no" title=":nth-last-child(3n+1) selector"></div> </div> <div class="test nthoftype1"> <div class="unitTest" title=":nth-of-type(odd) selector"></div> <p class="unitTest" title=":nth-* selector"></p> <p class="unitTest" title=":nth-* selector"></p> <div class="unitTest" title=":nth-last-of-type(odd) selector"></div> <p class="unitTest" title=":nth-* selector"></p> <div class="unitTest" title=":nth-of-type(odd) selector"></div> <div class="unitTest" title=":nth-last-of-type(odd) selector"></div> </div> <div class="test nthoftype2"> <div class="unitTest" title=":nth-last-of-type(even) selector"></div> <p class="unitTest" title=":nth-* selector"></p> <p class="unitTest" title=":nth-* selector"></p> <div class="unitTest" title=":nth-of-type(even) selector"></div> <p class="unitTest" title=":nth-* selector"></p> <div class="unitTest" title=":nth-last-of-type(even) selector"></div> <div class="unitTest" title=":nth-of-type(even) selector"></div> </div> <div class="test nthoftype3"> <div class="unitTest" title=":nth-of-type(3n+1) selector"></div> <p class="unitTest" title=":nth-* selector"></p> <p class="unitTest" title=":nth-* selector"></p> <div class="unitTest" title=":nth-last-of-type(3n+2) selector"></div> <p class="unitTest" title=":nth-* selector"></p> <div class="unitTest" title=":nth-last-of-type(3n+1) selector"></div> <div class="unitTest" title=":nth-of-type(3n+1) selector"></div> <p class="unitTest" title=":nth-* selector"></p> <div class="unitTest" title=":nth-last-of-type(3n+2) selector"></div> <div class="unitTest" title=":nth-last-of-type(3n+1) selector"></div> </div> <div class="test lastChild"> <p class="unitTest" title=":not(:last-child) selector"></p> <div class="unitTest" title=":last-child selector"></div>&nbsp; </div> <div class="test firstOfType"> <p class="unitTest" title=":first-of-type selector"></p> <div class="unitTest" title=":first-of-type selector"></div> <p class="unitTest" title=":not(:first-of-type)"></p> <div class="unitTest" title=":not(:first-of-type)"></div> </div> <div class="test lastOfType"> <p class="unitTest" title=":not(:last-of-type)"></p> <div class="unitTest" title=":not(:last-of-type)"></div> <p class="unitTest" title=":last-of-type selector"></p> <div class="unitTest" title=":last-of-type selector"></div> </div> <div class="test onlyChild"> <div class="unitTest" title=":only-child where the element is NOT the only child"></div> <div class="unitTest" title=":only-child where the element is the only child"> <div class="unitTest" title=":only-child where the element is the only child"></div> </div> </div> <div class="test onlyOfType"> <p class="unitTest" title=":only-of-type"></p> <div class="unitTest" title=":only-of-type"> <div class="unitTest" title=":only-of-type"></div> </div> <div class="unitTest" title=":not(only-of-type)"></div> </div> <div class="test empty"> <div class="unitTest isEmpty" title=":empty with empty element"></div> <div class="unitTest isNotEmpty" title=":empty but element contains a whitespace"> </div> <div class="unitTest isEmpty" title=":empty and element contains an SGML comment"><!-- foo --></div> <div class="unitTest isNotEmpty" title=":empty but element contains a SPAN element"><span></span></div> <div class="unitTest isNotEmpty" title=":empty but element contains an entity reference">&nbsp;</div> </div> <div class="test lang"> <div id="nofragment" class="unitTest" title=":lang() where language comes from the document"></div> <div class="unitTest" lang="fr" title=":lang() where language comes from the element"></div> <div class="unitTest" lang="en-US" title=":lang() where language comes from the element but is a dialect of the language queried"></div> <div class="unitTest t1" lang="es" title=":lang() where language comes from the element but the language queried is a dialect of the element's one so it should not match"></div> </div> <div class="test attrLang"> <div class="unitTest t1" title="[|=] where language comes from the document"></div> <div class="unitTest" lang="fr" title="[|=] where language comes from the element"></div> <div class="unitTest t2" lang="en-US" title="[|=] where language comes from the element but is a dialect of the language queried"></div> <div class="unitTest t3" lang="es" title="[|=] where language comes from the element but the language queried is a dialect of the element's one so it should not match"></div> </div> <div class="test UI"> <button name="submit" type="submit" value="submit" class="t1" title=":enabled pseudo-class"><div class="unitTest"></div></button> <button name="submit" type="submit" value="submit" class="t2" disabled="true" title=":enabled pseudo-class"><div class="unitTest"></div></button> </div> <div class="test UI"> <input class="t3" type="checkbox" checked="true"/><div class="unitTest" title=":checked"></div> the previous square should be green when the checkbox is checked and become red when you uncheck it </div> <div class="test UI"> <input class="t4" type="checkbox"/><div class="unitTest" title=":not(:checked)"></div> the previous square should be green when the checkbox is NOT checked and become red when you check it </div> <div class="test tilda"> <div class="unitTest t1" title="~ combinator"></div> <div class="unitTest" title="~ combinator"></div> <div class="unitTest" title="~ combinator"></div> <div class="unitTest" title="~ combinator"></div> <span style="float:left">the three last squares should be green and become red when the pointer hovers over the white square</span> </div> <div class="test plus"> <div class="unitTest t1" title="+ combinator"></div> <div class="unitTest t2" title="+ combinator"></div> <div class="unitTest" title="+ combinator"></div> <span style="float:left">the last square should be green and become red when the pointer hovers over the FIRST white square</span> </div> </div> <div id="root2"> <div class="header"> <h3>CSS 3 Selectors tests</h3> <p>(c) <a href="http://www.disruptive-innovations.com">Disruptive Innovations</a> 2008<br/> Last update: 2008-06-06</p> </div> <div class="test"> <div class="blox1 unitTest" title="childhood selector"></div> </div> <div class="test attributeExistence"> <div class="blox2 unitTest" align="center" title="attribute existence selector"></div> <div class="blox3 unitTest" align="" title="attribute existence selector with empty string value"></div> <div class="blox4 unitTest" valign="center" title="attribute existence selector with almost identical attribute"></div> <div class="blox5 unitTest" alignv="center" title="attribute existence selector with almost identical attribute"></div> </div> <div class="test attributeValue"> <div class="blox6 unitTest" align="center" title="attribute value selector"></div> <div class="blox6 unitTest" foo="&eacute;" title="attribute value selector with an entity in the attribute and an escaped value in the selector"></div> <div class="blox6 unitTest" _foo="&eacute;" title="attribute value selector with an entity in the attribute, an escaped value in the selector, and a leading underscore in the attribute name"></div> </div> <div class="test attributeSpaceSeparatedValues"> <div class="blox7 foo unitTest" title="[~=] attribute selector"></div> <div class="blox8 unitTest" title="[~=] attribute selector looking for empty string"></div> <div class="blox9 unitTest" foo="" title="[~=] attribute selector looking for empty string in empty attribute"></div> <div class="blox10 unitTest" foo="foobar" title="[~=] attribute selector looking for 'foo' in 'foobar'"></div> </div> <div class="test attrStart"> <div class="unitTest t1" title="[^=] attribute selector"></div> <div class="unitTest t2" title="[^=] attribute selector"></div> <div class="unitTest t3" align="center" title="[^=] attribute selector looking for empty string"></div> <div class="unitTest t4" foo="&eacute;tagada" title="[^=] attribute selector looking for &eacute;"></div> </div> <div class="test attrEnd"> <div class="unitTest t1" title="[$=] attribute selector"></div> <div class="unitTest t2" title="[$=] attribute selector"></div> <div class="unitTest t3" align="center" title="[$=] attribute selector looking for empty string"></div> <div class="unitTest t4" foo="tagada&eacute;" title="[$=] attribute selector looking for &eacute;"></div> </div> <div class="test attrMiddle"> <div class="unitTest t1" title="[*=] attribute selector"></div> <div class="unitTest t2" title="[*=] attribute selector"></div> <div class="unitTest t3" align="center" title="[*=] attribute selector looking for empty string"></div> <div class="unitTest t4" foo="tagada&eacute;foo" title="[*=] attribute selector looking for &eacute;"></div> </div> <div class="test firstChild"> <div class="unitTest" title=":first-child selector"></div> <div class="blox12 unitTest" title=":first-child selector should not match non first child"></div> <div class="blox13 unitTest" title=":first-child selector should not match non first child"></div> </div> <div class="test not"> <div class="blox14 unitTest" title="negation pseudo-class with argument being an element type selector"></div> <div class="blox15 unitTest" foo="blox15" title="negation pseudo-class with argument being an attribute selector"></div> <div class="blox16 unitTest" foo="blox15" title="negation pseudo-class accepts only simple selectors for argument"></div> </div> <div class="test onlyOfType"> <div class="blox17 unitTest" title=":only-of-type selector"></div> <p class="blox18 unitTest" title="negated :only-of-type selector"></p> <p class="blox18 unitTest" title="negated :only-of-type selector"></p> </div> <div class="test nthchild1"> <div class="unitTest" title=":nth-child(odd) selector"></div> <div class="unitTest" title=":nth-last-child(odd) selector"></div> <div class="unitTest" title=":nth-child(odd) selector"></div> <div class="unitTest" title=":nth-last-child(odd) selector"></div> <div class="unitTest" title=":nth-child(odd) selector"></div> <div class="unitTest" title=":nth-last-child(odd) selector"></div> </div> <div class="test nthchild2"> <div class="unitTest" title=":nth-last-child(even) selector"></div> <div class="unitTest" title=":nth-child(even) selector"></div> <div class="unitTest" title=":nth-last-child(even) selector"></div> <div class="unitTest" title=":nth-child(even) selector"></div> <div class="unitTest" title=":nth-last-child(even) selector"></div> <div class="unitTest" title=":nth-child(even) selector"></div> </div> <div class="test nthchild3"> <div class="unitTest no" title=":nth-last-child(3n+3) selector"></div> <div class="unitTest" title=":nth-child(3n+2) selector"></div> <div class="unitTest no" title=":nth-last-child(3n+1) selector"></div> <div class="unitTest no" title=":nth-last-child(3n+3) selector"></div> <div class="unitTest" title=":nth-child(3n+2) selector"></div> <div class="unitTest no" title=":nth-last-child(3n+1) selector"></div> </div> <div class="test nthoftype1"> <div class="unitTest" title=":nth-of-type(odd) selector"></div> <p class="unitTest" title=":nth-of-* selector"></p> <p class="unitTest" title=":nth-of-* selector"></p> <div class="unitTest" title=":nth-last-of-type(odd) selector"></div> <p class="unitTest" title=":nth-of-* selector"></p> <div class="unitTest" title=":nth-of-type(odd) selector"></div> <div class="unitTest" title=":nth-last-of-type(odd) selector"></div> </div> <div class="test nthoftype2"> <div class="unitTest" title=":nth-last-of-type(even) selector"></div> <p class="unitTest" title=":nth-of-* selector"></p> <p class="unitTest" title=":nth-of-* selector"></p> <div class="unitTest" title=":nth-of-type(even) selector"></div> <p class="unitTest" title=":nth-of-* selector"></p> <div class="unitTest" title=":nth-last-of-type(even) selector"></div> <div class="unitTest" title=":nth-of-type(even) selector"></div> </div> <div class="test nthoftype3"> <div class="unitTest" title=":nth-of-type(3n+1) selector"></div> <p class="unitTest" title=":nth-of-* selector"></p> <p class="unitTest" title=":nth-of-* selector"></p> <div class="unitTest" title=":nth-last-of-type(3n+2) selector"></div> <p class="unitTest" title=":nth-of-* selector"></p> <div class="unitTest" title=":nth-last-of-type(3n+1) selector"></div> <div class="unitTest" title=":nth-of-type(3n+1) selector"></div> <p class="unitTest" title=":nth-of-* selector"></p> <div class="unitTest" title=":nth-last-of-type(3n+2) selector"></div> <div class="unitTest" title=":nth-last-of-type(3n+1) selector"></div> </div> <div class="test lastChild"> <p class="unitTest" title=":not(:last-child) selector"></p> <div class="unitTest" title=":last-child selector"></div>&nbsp; </div> <div class="test firstOfType"> <p class="unitTest" title=":first-of-type selector"></p> <div class="unitTest" title=":first-of-type selector"></div> <p class="unitTest" title=":not(:first-of-type)"></p> <div class="unitTest" title=":not(:first-of-type)"></div> </div> <div class="test lastOfType"> <p class="unitTest" title=":not(:last-of-type)"></p> <div class="unitTest" title=":not(:last-of-type)"></div> <p class="unitTest" title=":last-of-type selector"></p> <div class="unitTest" title=":last-of-type selector"></div> </div> <div class="test onlyChild"> <div class="unitTest" title=":only-child where the element is NOT the only child"></div> <div class="unitTest" title=":only-child where the element is the only child"> <div class="unitTest" title=":only-child where the element is the only child"></div> </div> </div> <div class="test onlyOfType"> <p class="unitTest" title=":only-of-type"></p> <div class="unitTest" title=":only-of-type"> <div class="unitTest" title=":only-of-type"></div> </div> <div class="unitTest" title=":not(only-of-type)"></div> </div> <div class="test empty"> <div class="unitTest isEmpty" title=":empty with empty element"></div> <div class="unitTest isNotEmpty" title=":empty but element contains a whitespace"> </div> <div class="unitTest isEmpty" title=":empty and element contains an SGML comment"><!-- foo --></div> <div class="unitTest isNotEmpty" title=":empty but element contains a SPAN element"><span></span></div> <div class="unitTest isNotEmpty" title=":empty but element contains an entity reference">&nbsp;</div> </div> <div class="test lang"> <div id="nofragment" class="unitTest" title=":lang() where language comes from the document"></div> <div class="unitTest" lang="fr" title=":lang() where language comes from the element"></div> <div class="unitTest" lang="en-US" title=":lang() where language comes from the element but is a dialect of the language queried"></div> <div class="unitTest t1" lang="es" title=":lang() where language comes from the element but the language queried is a dialect of the element's one so it should not match"></div> </div> <div class="test attrLang"> <div class="unitTest t1" title="[|=] where language comes from the document"></div> <div class="unitTest" lang="fr" title="[|=] where language comes from the element"></div> <div class="unitTest t2" lang="en-US" title="[|=] where language comes from the element but is a dialect of the language queried"></div> <div class="unitTest t3" lang="es" title="[|=] where language comes from the element but the language queried is a dialect of the element's one so it should not match"></div> </div> <div class="test UI"> <button name="submit" type="submit" value="submit" class="t1" title=":enabled pseudo-class"><div class="unitTest"></div></button> <button name="submit" type="submit" value="submit" class="t2" disabled="true" title=":enabled pseudo-class"><div class="unitTest"></div></button> </div> <div class="test UI"> <input class="t3" type="checkbox" checked="true"/><div class="unitTest" title=":checked"></div> the previous square should be green when the checkbox is checked and become red when you uncheck it </div> <div class="test UI"> <input class="t4" type="checkbox"/><div class="unitTest" title=":not(:checked)"></div> the previous square should be green when the checkbox is NOT checked and become red when you check it </div> <div class="test tilda"> <div class="unitTest t1" title="~ combinator"></div> <div class="unitTest" title="~ combinator"></div> <div class="unitTest" title="~ combinator"></div> <div class="unitTest" title="~ combinator"></div> <span style="float:left">the three last squares should be green and become red when the pointer hovers over the white square</span> </div> <div class="test plus"> <div class="unitTest t1" title="+ combinator"></div> <div class="unitTest t2" title="+ combinator"></div> <div class="unitTest" title="+ combinator"></div> <span style="float:left">the last square should be green and become red when the pointer hovers over the FIRST white square</span> </div> </div> <div id="root3"> <div id="svgs"> <!-- svg elements, but in the xhtml namespace --> <svg width="12cm" height="4cm" viewBox="0 0 1200 400" version="1.1" id="svg1"> <desc id="desc1">Example circle01 - circle filled with red and stroked with blue</desc> <rect id="rect1" x="1" y="1" width="1198" height="398" fill="none" stroke="blue" stroke-width="2"/> <circle id="circle1" cx="600" cy="200" r="100" fill="red" stroke="blue" stroke-width="10" /> </svg> <!-- svg elements using svg: --> <svg:svg width="12cm" height="4cm" viewBox="0 0 1200 400" version="1.1" id="svg2"> <svg:desc id="desc2">Example circle01 - circle filled with red and stroked with blue</svg:desc> <svg:rect id="rect2" x="1" y="1" width="1198" height="398" fill="none" stroke="blue" stroke-width="2"/> <svg:circle id="circle2" cx="600" cy="200" r="100" fill="red" stroke="blue" stroke-width="10" /> </svg:svg> <!-- svg using an inline xmlns --> <svg width="12cm" height="4cm" viewBox="0 0 1200 400" xmlns="http://www.w3.org/2000/svg" version="1.1" id="svg3"> <desc id="desc3">Example circle01 - circle filled with red and stroked with blue</desc> <rect id="rect3" x="1" y="1" width="1198" height="398" fill="none" stroke="blue" stroke-width="2"/> <circle id="circle3" cx="600" cy="200" r="100" fill="red" stroke="blue" stroke-width="10" /> </svg> </div> </div>

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
1.7.2 tag
Sizzle1_7_2("div");
pending…
1.8 tag
Sizzle1_8("div");
pending…
1.7.2 custom pseudo
Sizzle1_7_2(".test div:contains('square')");
pending…
git custom pseudo
Sizzle1_8(".test div:contains('square')");
pending…
1.7.2 class
Sizzle1_7_2(".unitTest");
pending…
1.8 class
Sizzle1_8(".unitTest");
pending…
1.7.2 attr
Sizzle1_7_2("[title='attribute']");
pending…
1.8 attr
Sizzle1_8("[title='attribute']");
pending…
1.7.2 pseudo
Sizzle1_7_2("div:first-child");
pending…
1.8 pseudo
Sizzle1_8("div:first-child");
pending…
1.7.2 POS
Sizzle1_7_2(".test div:first");
pending…
1.8 POS
Sizzle1_8(".test div:first");
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL.

1 Comment

a commented :

a

CSS 3 Selectors tests

(c) Disruptive Innovations 2008
Last update: 2008-06-06

 

 
the previous square should be green when the checkbox is checked and become red when you uncheck it
the previous square should be green when the checkbox is NOT checked and become red when you check it
the three last squares should be green and become red when the pointer hovers over the white square
the last square should be green and become red when the pointer hovers over the FIRST white square

CSS 3 Selectors tests

(c) Disruptive Innovations 2008
Last update: 2008-06-06

 

 
the previous square should be green when the checkbox is checked and become red when you uncheck it
the previous square should be green when the checkbox is NOT checked and become red when you check it
the three last squares should be green and become red when the pointer hovers over the white square
the last square should be green and become red when the pointer hovers over the FIRST white square
Example circle01 - circle filled with red and stroked with blue Example circle01 - circle filled with red and stroked with blue Example circle01 - circle filled with red and stroked with blue