Demo Sizzle

Sizzle! GenevaJS will arm itself with the Sizzle selector engine if it detects the Sizzle object within the window. Use the select menu above to highlight elements on the page using the standard prototype selector engine, then switch on sizzle and try the same - a huge amount of selector syntax at your fingertips!!

W3C CSS3 Selectors









div set 1 : 1

div set 1 : 2

div set 1 : 3


div set 2 : 1


div set 2 : 2


div set 2 : 3



Button 1 (span) Button 2 (span) Button 2 (span) href set 1 # 1 ( href_class_1 )
href set 1 # 2 ( href_class_1 )
href set 1 # 3 ( href_class_1 )

href set 2 # 1 ( href_class_2 )
href set 2 # 2 ( href_class_2 )
href set 2 # 3 ( href_class_2 )

  • sibling1
  • sibling2
  • sibling3
  • sibling4
Friend 1 - Href Friend 2 - Href Friend 3 - Href

The following table summarizes the Selector syntax:

Pattern Meaning Described in section First defined in CSS level
* any element Universal selector 2
E an element of type E Type selector 1
E[foo] an E element with a "foo" attribute Attribute selectors 2
E[foo="bar"] an E element whose "foo" attribute value is exactly equal to "bar" Attribute selectors 2
E[foo~="bar"] an E element whose "foo" attribute value is a list of space-separated values, one of which is exactly equal to "bar" Attribute selectors 2
E[foo^="bar"] an E element whose "foo" attribute value begins exactly with the string "bar" Attribute selectors 3
E[foo$="bar"] an E element whose "foo" attribute value ends exactly with the string "bar" Attribute selectors 3
E[foo*="bar"] an E element whose "foo" attribute value contains the substring "bar" Attribute selectors 3
E[hreflang|="en"] an E element whose "hreflang" attribute has a hyphen-separated list of values beginning (from the left) with "en" Attribute selectors 2
E:root an E element, root of the document Structural pseudo-classes 3
E:nth-child(n) an E element, the n-th child of its parent Structural pseudo-classes 3
E:nth-last-child(n) an E element, the n-th child of its parent, counting from the last one Structural pseudo-classes 3
E:nth-of-type(n) an E element, the n-th sibling of its type Structural pseudo-classes 3
E:nth-last-of-type(n) an E element, the n-th sibling of its type, counting from the last one Structural pseudo-classes 3
E:first-child an E element, first child of its parent Structural pseudo-classes 2
E:last-child an E element, last child of its parent Structural pseudo-classes 3
E:first-of-type an E element, first sibling of its type Structural pseudo-classes 3
E:last-of-type an E element, last sibling of its type Structural pseudo-classes 3
E:only-child an E element, only child of its parent Structural pseudo-classes 3
E:only-of-type an E element, only sibling of its type Structural pseudo-classes 3
E:empty an E element that has no children (including text nodes) Structural pseudo-classes 3
E:link
E:visited		 an E element being the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited) The link pseudo-classes 1
E:active
E:hover
E:focus		 an E element during certain user actions The user action pseudo-classes 1 and 2
E:target an E element being the target of the referring URI The target pseudo-class 3
E:lang(fr) an element of type E in language "fr" (the document language specifies how language is determined) The :lang() pseudo-class 2
E:enabled
E:disabled		 a user interface element E which is enabled or disabled The UI element states pseudo-classes 3
E:checked a user interface element E which is checked (for instance a radio-button or checkbox) The UI element states pseudo-classes 3
E::first-line the first formatted line of an E element The ::first-line pseudo-element 1
E::first-letter the first formatted letter of an E element The ::first-letter pseudo-element 1
E::selection the portion of an E element that is currently selected/highlighted by the user The UI element fragments pseudo-elements 3
E::before generated content before an E element The ::before pseudo-element 2
E::after generated content after an E element The ::after pseudo-element 2
E.warning an E element whose class is "warning" (the document language specifies how class is determined). Class selectors 1
E#myid an E element with ID equal to "myid". ID selectors 1
E:not(s) an E element that does not match simple selector s Negation pseudo-class 3
E F an F element descendant of an E element Descendant combinator 1
E > F an F element child of an E element Child combinator 2
E + F an F element immediately preceded by an E element Adjacent sibling combinator 2
E ~ F an F element preceded by an E element General sibling combinator 3

$().ready( function () {

  function selectorLog(e) {
    var selector  = e.target.value;
    var results   = $(selector);


    if ( results._elems[0] !== null ) {
      $( results._first() ).scrollTo();
      results.highlight();
      return;   
    } 

    console.log( "'" + selector + "'" +
    ' did not locate any elements in the document');
  }

  $('#selectors')
    .change( selectorLog )
      .keyup( function(e) {
        if ( e.keyCode == 38 || e.keyCode == 40 )
          selectorLog(e);
      });

  $('#selectors').focus(); 

  $('#form_sizzle_mode')
    .submit(  function () {
      location.href='demo-sizzle.php?' + $('#form_sizzle_mode').serialize();
    });

});