すべての要素にマッチします。下記の例では、すべての要素のフォントを Arial に設定します。

$("*").css("font-family", "Arial");

すべての element要素にマッチします。下記の例では、すべての <h1>～</h1> にマッチします。

$("h1").css("color", "red");    // <h1>～</h1>

class="class" が指定されたすべての要素にマッチします。

$(".caution").css("color", "red");        // <h1 class="caution">～</h1>

element.class とした場合、class="class" が指定された element要素にマッチします。

$("p.caution").css("color", "red");       // <p class="caution">～</p>

.class1.class2 とした場合、class="class1 class2" が指定された要素にマッチします。

$(".caution.error").css("color", "red");  // <p class="caution error">～</p>

id="id" が指定された要素にマッチします。同じ id を持つ要素は、ひとつのドキュメントに通常ひとつしか記述しません。要素に特色をつけたい場合は class を、特定の要素を指定したい場合は id を使用します。

$("#p123").css("color", "red");        // <p id="p123">～</p>

element.#id とした場合、id="id" が指定された element要素にマッチします。

$("p#p123").css("color", "red");        // <p id="p123">～</p>

.class#id とした場合、class="class" id="id" が指定された要素にマッチします。

$(".caution#p123").css("color", "red");  // <p class="caution" id="p123">～</p>

selector1 または selector2 または selectorN にマッチする要素の集合です。

$("h1,.p1,#p2").css("color", "red");  // <h1>...</h1><p class="p1">...</p><p id="p2">...</p>

selector1 の子孫要素として出現する selector2 にマッチします。

$("table#t1 td").css("color", "red");    // <table id="t1"><tr><td>...</td></tr></table>

selector1 の子要素として出現する selector2 にマッチします。tr要素は table要素の子要素ではなく、table > tbody/thead/tfoot > tr となることに注意してください。

$("ul.sample > li").css("color", "red");    // <ul class="sample"><li>...</li></table>

selector1 の直後に兄弟要素として出現する selector2 にマッチします。

$("#p1 + p").css("color", "red");           // <p id="p1"></p><p>...</p>

selector1 の後に兄弟要素として出現する selector2 にマッチします。

$("#p1 ~ p").css("color", "red");    // <p></p><p id="p1"></p><p>...</p><p>...</p>

name属性を持つ要素にマッチします。

$("[href]").css("color", "red");       // <a href="...">...</a>
$("a[href]").css("color", "red");      // <a href="...">...</a>
$("a.a1[href]").css("color", "red");   // <a class="a1" href="...">...</a>
$("a#a2[href]").css("color", "red");   // <a id="a2" href="...">...</a>

name属性の値が valueに等しい要素にマッチします。

$("[lang='ja']").css("color", "red");    // <p lang="ja">...</p>

name属性の値が valueに等しくない要素にマッチします。

$("p[lang!='ja']").css("color", "red");    // <p lang="en">...</p>

name属性の値がスペースで区切られたひとつ以上の値を持つ場合、その値のひとつが value と等しい要素にマッチします。

$("p[class~='cool']").css("color", "blue");    // <p class="cool sharp">...</p>

name属性の値がプレフィクスとして value または value- を含む要素にマッチします。

$("p[lang|='en']").css("color", "red");    // <p lang="en-US">...</p>

name属性の値が value を先頭に含む要素にマッチします。

$("a[href^='http:']").css("color", "red");    // <a href="http://">...</a>

name属性の値が value を末尾に含む要素にマッチします。

$("img[src$='.png']").css("border", "2px solid red");    // <img src="sample.png">

name属性の値が valueを含む要素にマッチします。

$("a[href*='http://']").css("color", "red");    // <a href="http://example.com/">...</a>

attmatch1、attmatch2 両方を満たす要素にマッチします。

$("[id='p1'][class~='p2']").css("color", "red");    // <p id="p1" class="p2">...</a>

対象要素の中で偶数番目/奇数番目の要素にマッチします。

$("div.message:even").css("background", "#ddd");
$("div.message:odd").css("background", "#eee");

対象要素の中で最初/最後の要素にマッチします。

$("div.message:first").css("color", "red");
$("div.message:last").css("color", "red");

対象要素の中で 0から数えて index番目の要素にマッチします。負の値を指定した場合は後ろから数えます。

$("div.message:eq(5)").css("color", "red");

対象要素の中で 0番目から数えて index番目より大きい/小さい要素にマッチします。

$("div.message:gt(5)").css("background", "#ccc");
$("div.message:lt(5)").css("background", "#ccc");

対象要素の中で selector にマッチしない要素にマッチします。

$("div:not(.except)").css("color", "#ccc");    // <div class="except">...</div>

対象要素の中でフォーカスが当たっている要素にマッチします。

$("input").focus(function() {
    $("input:focus").css("background-color", "#ccf");
    $("input:not(:focus)").css("background-color", "#fff");
});

対象要素の中のヘッダ要素(h1, h2, h3...)にマッチします。

$(":header").css("text-transform", "uppercase");    // <h1>...</h1>

対象要素の中で、lang="language" の要素にマッチします。

$(":lang(en)").css("font-family", "Arial");         // <span lang="en">...</span>

ドキュメントのルート要素(通常html要素)にマッチします。

alert($(":root")[0].nodeName);                      // HTML

対象要素の中で、URI のターゲット(#target) を id として持つ要素にマッチします。例えば、http://www.example.com/sample.html#HTML にアクセスされた場合、id="HTML" 属性を持つ要素にマッチします。

$(":target").css("background-color", "yellow");    // <h1 id="HTML">...</h1>

アニメーション実行中の要素にマッチします。

$("div#d1").animate({ 'font-size': '32pt' }, 1000);
$("div:animated").css("color", "red");

text をテキストとして含む要素にマッチします。

$("p:contains('John')").css("color", "red");    // <p> ... John ... </p>

空の要素にマッチします。

$("td:empty").css("background-color", "#ccc");    // <td></td>

対象要素の中で、selector にマッチする要素を子孫要素として持つ要素にマッチします。

$("p:has(b)").css("color", "red");    // <p>...<b>...</b>...</p>

対象要素の親要素にマッチします。

$("b:parent").css("color", "red");    // <p>...<b>...</b>...</p>

非表示要素にマッチします。非表示要素には、head, title, meta, script, style などの非表示要素、CSS で display: none が設定された要素、width:0; height:0 が設定された要素、type="hidden" の input要素、祖先要素が非表示状態の要素が含まれます。

$(":hidden").each(function() {
    $("#log").append($(this)[0].nodeName + "<br>");
});

表示されている要素にマッチします。表示要素には html, body要素も含まれます。

$(":visible").each(function() {
    $("#log").append($(this)[0].nodeName + "<br>");
});

対象要素の内、その要素が親要素から見て最初の(最後の)子要素であるものにマッチします。

$("tr:first-child").css("color", "red");

対象要素の内、その要素が親要素から見て同じ種別の最初の(最後の)子要素であるものにマッチします。下記の例では、th要素を無視して、最初の(最後の) td要素にマッチする点が first-child, last-child と異なります。

$("td:first-of-type").css("color", "red");

対象要素の内、その要素の親要素から見て index番目の子要素であるものにマッチします。最初の要素が 1番目になります。:nth-last-child() は後ろから数えます。

$("tr:nth-child(3)").css("background-color", "#ccc");

index は、2の倍数(2n)や、2の倍数に1を加えたもの(2n+1)などを指定することができます。

$("tr:nth-child(2n+1)").css("background-color", "#ccc");

:nth-child()、:nth-last-child() と同様ですが、同じ種別の要素のみを数えます。

$("td:nth-of-type(2n+1)").css("background-color", "#ccc");

その要素が、親要素から見て唯一の子要素である場合にマッチします。

$("tr:only-child").css("color", "red");

その要素が、親要素から見て同じ種別の唯一の子要素である場合にマッチします。

$("td:only-of-type").css("color", "red");

input、textarea、select、button要素にマッチします。

$(":input").css("color", "red");

type-"text", type="password" 等の input要素にマッチします。

$("input:text").css("color", "red");

checked な状態の要素にマッチします。val() も参照してください。

$("input").change(function() {
    val = $("input[name='color']:checked").map(function() {
        return $(this).val();
    }).get();                          // [ "Black", "White" ]
    alert(val);
});

disabled な状態の要素にマッチします。

$("input:disabled").css("background-color", "#ccc");

enabled な状態の input、textarea、select、button、optgroup、option要素にマッチします。

$(":enabled").css("color", "red");

selected な状態の option要素にマッチします。

$("select#s1").change(function() {
    alert($("option:selected").val());
});