jQuery select.jsを使ってセレクター指定のチェック。

左側の[toggle]ボタンをクリックすると、右側のダミーの各要素に、下の「Toggle Button」で指定した効果（黄色でハイライト、右へ10pxスライド）を与えます。セレクター指定がどの部分に影響を及ぼすか確認できます。なお、右側のダミー要素は、fixedで位置固定です。
オリジナル：http://www.learningjquery.com/ & http://www.codylindley.com/

Toggle Button = `$('selector').addClass('highlight').animate({ marginLeft: 10}, 'fast');`

この文章は次のような "div"要素の中に。 <div id="myid">. この部分は水平方向の続き。

この段落は、 とのタグに包まれています。そして、その "p" タグであることを表示するため、
次のような"code"タグ<code>を使っています。

こちらはリスト要素最初。右のタグ使用 (<li>) "li"要素の親要素は順不同リストの (<ul>).
こちらは2番目のリスト要素。リンク link を含んでいます。
こちらは3番目のリスト要素。次のclass 名 "myclass otherclass"を指定しています。
こちらは3番目のリスト要素。strong のテキストと emを使った斜体のテキストを使用しています。
- second-level（第2階層）のリスト要素その１
- second-level（第2階層）のリスト要素その２

別の段落です。class="myclass" を指定しているだけで、他に特別なものはありません。

この段落は、  と  で囲まれています。この"p" タグをを表示するため、 <code>を使っています。

セレクターを入力してチェック ( 例: li:nth-child(2) )

Basics

$('code')

$('#myid')

$('.myclass')

$('*')

$('code, #myid, .myclass')

Hierarchy

$('div code')

$('li > ul')

$('strong + em')

$('strong ~ em')

Basic Filters

$('li:first')

$('li:last')

$('li:not(li:first)')

$('li:even')

$('li:odd')

$('li:eq(1)')

$('li:gt(2)')

$('li:lt(2)')

$(':header')

Content Filters

$('li:contains(second-level)')

$(':empty')

$('li:has(a)')

$('p:parent')

Visibility Filters

$(':hidden')

$(':visible')

Attribute Filters

$('li[class]')

$('a[rel="self"]')

$('a[rel!="nofollow"]')

$('[class^="my"]')

$('a[title$="blog"]')

$('a[href*="zip"]')

$('a[rel][href][title$="blog"]')

Child Filters

$('li:nth-child(even)')

$('li:nth-child(odd)')

$('li:nth-child(2)')

$('li:nth-child(2n)')

$('li:first-child')

$('li:last-child')

$('code:only-child')

Forms

$(':input')

$(':text')

$(':password')

$(':radio')

$(':checkbox')

$(':submit')

$(':image')

$(':reset')

$(':button')

$(':file')

$(':hidden')

Form Filters

$('input:enabled')

$(':disabled')

$(':checked')

$(':selected')

Toggle Button = $('selector').addClass('highlight').animate({ marginLeft: 10}, 'fast');