Tips

セレクタというのは一種のクエリ言語のようなもので、HTML要素を特定する手段である。「全てのチェックボックスにチェックを入れる」とか、「いずれかのボタンを押したらダイアログを表示する」などある特定の要素に対して操作を行うことができる。要素は最終的に1つに絞ることもあれば、類似の複数の要素を選択することもある。

セレクタの中でメタ文字（例えば !”#$%&'()*+,./:;<=>?@[\]^`{|}~ といったセレクタ内で特定の意味を持つ文字）を使うには \\ でエスケープすること。
例えば次のような要素があるとすると、

これを選択するには以下の様に書く。

尚、W3CのCSS仕様には、CSSのセレクタに関する完全なルールについて記載されている。

基本的なセレクタ

• *　… 全ての要素を選択
• .class　… 指定したクラス名のclass属性を持つ要素を全て選択
• element　… 指定した要素名の要素を全て選択
• #id　… 指定した名前のid属性を持つ単一の要素を選択
• sel1,sel2,selN　… カンマで区切って複数指定されたセレクタを結合した結果の要素を選択

階層に対するセレクタ

• A>B　… Aで指定された要素の一つ下の階層の要素のうちBで指定されている要素だけを選択
• A B　… Aで指定された要素より下の階層の要素のうちBで指定されている要素だけを選択
• A+B　… Aで指定された要素と同じ階層の直後の要素のうちBに該当する要素を選択
• A~B　… Aで指定された要素と同じ階層の要素のうちBで指定された要素を選択

属性に対するセレクタ

• [name]　… 指定した属性nameを持つ要素を選択。この場合値の内容は問わない
• [name=”value”]　… 指定した属性nameを持ち、その値が指定した値valueと正確に一致している要素を選択
• [name!=”value”]　… 指定した属性nameを持たない、あるいは持っていても指定した値valueと異なる要素を選択
• [name^=”value”]　… 指定した属性nameを持ち、その値の先頭が指定した値valueである要素を選択
• [name$=”value”]　… 指定した属性nameを持ち、その値の末尾が指定した値valueである要素を選択
• [name*=”value”]　… 指定した属性nameを持ち、その値に指定した値valueが含まれている要素を選択
• [name~=”value”]　… 指定した属性nameを持ち、その値に指定した値valueがスペースで区切られた単語として含まれている要素を選択
• [name|=”value”]　… 指定した属性nameを持ち、指定した値valueが値と一致しているか、ハイフン付の接頭語として用いられている要素を選択
• [指定1][指定2]…[指定n]　… 全ての属性セレクタの条件を満たす要素を選択