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"]に置き換えて使うようにした方が諸々よろしいかと存じます。

何卒宜しくお願い致します。