CSS おれおれ Advent Calendar 2012 – 13日目
今日はちょいと視点を変えて見ました。
jQueryの特徴的な機能として「CSSのセレクターを使って要素を検索できる」というのがあります。
ただしjQueryでは独自に拡張してCSS本来のセレクターよりも強力だったりします。逆にjQueryを普段から使っていてたまにCSSを書こうとすると迷う場面もありそうです。
というわけで、jQueryが独自に拡張しているセレクター一覧です。（属性非同値セレクター以外は全部疑似セレクターですね。）
全般
[name!="value"]
属性が指定の値でないものを検索します。
.not('[name="value"]')の方が高速です。
意外とこれCSSにないんですよね。これ以外の、[name="value"]とか[name|="value"]とか諸々はあります。
:header
見出し要素、つまりh1, h2, …h6を検索します。
ちなみにHTML的には、これらはheaderではなくheadingが正しい。中の人が間違えたんだと思います。が、二年前に修正提案が却下されています。検索速度への影響があるかもって話みたいだけど、なんだかなあ。
hgroupやheaderは該当しません。
視覚
:animated
jQueryの .animate()でアニメーションしている最中のものだけを選択します。
CSS3のtransitionやanimationには反応しないようです。
:visible
可視のもの（見えるもの）だけを選択します。
具体的に言うと領域を持つもの、です。なのでvisibility:hiddenやopacity:0は透明ですが、可視と判断されます。またアニメーションの途中のものも可視と判断されます。
フォーム
:button
button, input[type='button']と同じです。
input[type='submit'], input[type='reset']は該当しません。
:checkbox
input[type="checkbox"]と同じです。
ちなみにチェックされたものを表す:checkedはCSSにもあります。
:file
input[type="file"]と同じです。
:hidden
非表示の要素をを選択します。フォームの不可視項目に限りません。
以下の要素が該当します。
display:noneなものinput[type="hidden"]のものwidth,heightがいずれも0のもの- 親が「非表示」のもの
:image
input[type="image"]と同じです。
フォームではない画像要素imgは該当しません。
:input
各種のフォーム入力要素を検索します。
手動でやる場合はinput, button, textarea, selectあたりでしょうか。
:password
input[type="password"]と同じです。
:radio
input[type="radio"]と同じです。
ちなみに選択されているものは:checkedで得られます。
:reset
input[type="reset"]と同じです。リセットボタンをまだ使ってるところってあまりないですが。
:submit
input[type="submit"], button[type="default"], button[type="submit"]と同じです。
:text
input[type="text"]と同じです。
textareaは含まれません。
:selected
選択されているoptionを検索します。
JavaScript的には:checkedと対になっているイメージなんですが、CSSにはないんですね。まあselect > optionはあまりスタイルを設定する場面がなさそうではありますが。
順序
:first, :last
ドキュメントツリーに出現した最初、最後のものを検索します。
似たものに:first-child, :last-childがあります（これはCSSでもある）が、それらは各兄弟ごとに先頭、末尾のものを検索するのに対して、jQueryの:first, :lastは本当に先頭、末尾のものひとつだけを検索します。
:even, :odd
偶数、奇数個目のものを検索します。
:nth-child(2n), :nth-child(2n+1)で代用できます。（これらはCSSでもある。）
:eq()
:eq(n)としたとき、n番目のものだけを検索します。nは0開始です。
:nth-child()が近いですが、各兄弟ごとに検索するものです。:eq()は検索結果全体に対してになります。また番号の開始が1と0という点も異なっています。
:gt(), :lt()
大なり (Greater Than)、小なり (Less Than) です。nは0開始です。
A, B, C, D, Eの五つの要素を検索したとして、:gt(2)とするとD, Eを、:lt(2)とするとA, Bをを得られます。
状態
:has()
指定のセレクターの要素を子孫に持つ要素、を検索します。
$('body:has(h1)')の場合、得られるのは<h1 />ではなく<body />の方です。
セレクターよりメソッド .has()の方が推奨されています。
:not()
指定のセレクターに合致しない要素、を検索します。
jQueryの場合はあらゆるセレクターを与える事ができます。CSSにも:not()はあるのですが、そちらは単純なセレクターしか与える事ができません。
セレクターよりメソッド .not()の方が推奨されています。
:parent
何かの親である要素、を検索します。指定の要素の親要素、ではありません。
例えば<div><img /></div>のうち<div />を得られます。また<div>Text</div>でも同様に<div />を得られますが、<div></div>では何も得られません。
おしまい
フォーム入力欄を得るやつは将来削除される予定みたいなので、属性セレクター[name="value"]に置き換えて使うようにした方が諸々よろしいかと存じます。
何卒宜しくお願い致します。