CSSのセレクタを理解しよう
セレクタとは
セレクタ（CSSセレクタ）は、CSSにおいてスタイルを適用する要素を選択するための条件式です。
元々はCSS用に作られた仕組みですが、現在では、プログラム(JavaScript)から特定のDOM要素を対象にして処理を行いたい場合に「（HTML文書内から）処理対象とする要素を選択する」目的でも使われます。
例えばhifiveでは、イベントハンドラを記述する際、「どの要素でイベントが起きたらハンドラを実行するか？」を絞り込むために使用します。
（例：マウスクリックのイベントが起きたとき、クリックされた要素が、指定されたセレクタの条件にマッチするか？をチェックして関数を実行するかどうかを決定しています。）
セレクタの例
| 種類 | 記法 | 意味 |
|---|---|---|
| 要素型セレクタ | E | 要素を指定します。「div」は任意の<div>要素を選択します。 |
| 属性セレクタ | [foo="xxx"] | foo属性の値がxxxである要素を選択します。 「input[type="button"]」は<input type="button">を選択します。 |
| IDセレクタ | #xxx | id属性値を条件にして選択を行います。 「#myId」は、「<div id="myId">」や「<ul id="myId">」のように、id属性の値がmyIdになっている要素を選択します。 |
| クラスセレクタ | .xxx | CSSクラス（class属性の値）を指定します。 「.myClass」は「<div class="myClass contents">」のように、class属性の値にmyClassが含まれている要素を選択します（例のように、myClass以外の値が含まれていてもよい）。 |
| 全称セレクタ | * | 全ての要素を選択します。 次に説明する“子孫セレクタ”などと組み合わせて「特定の要素以下の全ての要素にスタイルを適用する」ような場合によく使います。 |
※注：「E」の部分には、要素名(div, aなど)が入ります
条件を組み合わせる
複数の条件を組み合わせる(AND条件＝指定されたすべての条件を満たす要素だけを選択する)ことも可能です。
その要素が満たすべき条件を全て繋げて（途中にスペースや改行を入れずに）記述します。
例：id属性の値がitemsで、class属性にsearchResultとtopの2つが含まれているdiv要素を選択する
⇒答え：div#items.searchResult.top
注：idの条件とクラスの条件はどの順で書いてもよいが、要素の条件は必ず先頭に書かなければならない
また、HTML文書の木構造に基づいて「特定の構造を持つ要素だけを選択する」こともできます。
代表的なものを以下に挙げます。
| 種類 | 記法 | 意味 |
|---|---|---|
| 子孫セレクタ | E F（EとFの間はスペース） | E要素の子孫のF要素を選択します。 「div a」は任意のdiv要素の子孫のa要素を選択します。また、構造は多段で指定することもでき、「E F G」と書くと（例：div ul li）「E要素の子孫のF要素の子孫のG要素」を選択します。 |
| 子セレクタ | E > F | E要素の直接の子供であるF要素を選択します。子孫セレクタと同様、構造は多段で指定することができます。 |
※注：「E」「F」の部分には、要素名(div, aなど)が入ります。また、条件を組み合わせることもできます。
（例：「div#contents > a.itemLink」というセレクタの場合、「idがcontentsであるdiv要素の直下の、class属性にitemLinkを持つa要素」が選択されます。）
具体例
a
- 全てのa要素 を選択します。
li.itemList
- クラス属性にitemListという値を持つli要素 を選択します。
div#container a.externalLink
- idがcontainerであるdiv要素 ⇒ の子孫のうちクラス属性にexternalLinkという値を持つa要素 を選択します。
div#container > ul li
- idがcontainerであるdiv要素 ⇒ の直接の子であるul要素 ⇒ の子孫であるli要素 を選択します。
理解度確認クイズ
参考
セレクタには、他にもいくつか種類があります。
記法や意味については以下のページなどを参照してください。