Web制作向上ダイアリー流！CSSセレクタ辞典

CSSセレクタとはCSSでスタイルを指定する対象となるHTML要素のことです。

h1 {
	//スタイルの宣言
}

上記の例ではh1がCSSセレクタに該当します。

今回は、CSSの勉強を始めたばかりの方向けに、以下について解説していきます。

CSSセレクタのおおまかな種類
CSSセレクタのうちの「属性セレクタ」の種類
CSSセレクタを組み合わせる際に使う結合子の種類

この記事を読むことによって、CSSで使用されているセレクタについての理解が深まり、より複雑なセレクタを用いた指定を記述することが可能となります。

CSSの記述の自由度を上げるためにも大事な知識となりますので、ぜひご一読ください。

CSSセレクタの種類
記述ルール
1. 属性セレクタについて
結合子
1. 結合子の種類
まとめ
参考文献・URL
1. 書籍
2. サイト

CSSセレクタの種類

おおまかに、CSSセレクタには以下の種類があります。

ユニバーサルセレクタ（全称セレクタ）
「すべての要素」をさすセレクタで、「*」であらわされます。
タイプセレクタ
要素名で直接指定するセレクタです。「h1」や「p」といった要素名で指定されます。
IDセレクタ
適用対象とするHTML要素のID名で指定するセレクタです。ID名の先頭に「#」を付けてあらわします。
クラスセレクタ
適用対象とするHTML要素のクラス名で指定するセレクタです。クラス名の先頭に「.」を付けてあらわします。
属性セレクタ
適用対象とするHTML要素の属性や属性値を用いて指定するセレクタです。属性セレクタは[]（鍵カッコ）で属性名や属性値をくくってあらわします。書き方にいくつか種類があり、それについては後述します。
擬似クラス
HTML要素が特定の状態になったときや、「特定の要素から〇個目」等の指定をする際に使用します。先頭に「:」を付けてあらわします。
こちらは属性セレクタ以上に豊富な種類があるため、この記事では詳しくは解説しません。今後、別の記事として制作予定です（10/25時点ではだ記事はありません）。
擬似要素
指定した要素に対して、前や後に擬似的に要素を付加したり、ブロックレベル要素の1行目や1文字目に対してのみスタイルの指定をおこなう際に使用します。
こちらについても、別記事で詳しく解説したいと思います（10/25時点ではまだ記事はありません）。

実際のCSSの記述では、これらのセレクタをそのまま使用したり、時には組み合わせたりしながらHTMLの各要素に対してレイアウトや見た目の調整をおこなっていきます。

そして、最小単位となる（スタイルの指定に最低限使用される）セレクタは「シンプルセレクタ」と呼ばれます。

記述ルール

CSSのセレクタの記述には、

「必ずユニバーサルセレクタ（*）かタイプセレクタ（要素名のセレクタ）を先頭に書く」

というルールがあります。
ただし、ユニバーサルセレクタ（*）が先頭になる場合のみ省略することが可能です。

つまり、よく見かける

.className {
//スタイル指定
}

のようにクラスセレクタのみで行なわれている指定などは、厳密には「.className」という記述になり、先頭のユニバーサルセレクタ（*）が省略されているということです。

属性セレクタについて

シンプルセレクタのうち、属性セレクタにはさらに細かい指定方法の種類があります。覚えるのはかなり大変ですし、困ったらググればすぐに情報にたどり着けますので、「こういうこともできるんだ」くらいの認識で結構かと思います。

[属性名]
[]内に記述した属性名が指定された要素にスタイルを適用します。その際、属性値はどんな値が指定されていても影響を与えません。
See the Pen attribute-[] by Aoi719 (@aoi719) on CodePen.
[属性名=”属性値”]
[]内に記述した属性名と属性値が指定された要素にスタイルを適用します。この指定では、属性値まで完全に一致した要素にのみスタイルが適用されます。
[属性名~=”属性値”]
こちらも[]内に記述した属性名と属性値が指定された要素にスタイルを適用します。ただし属性値に関しては、HTML側で空白文字（半角スペースやタブ、改行など）で区切られた属性のうちどれか1つと一致していれば適用されます。
class名など、複数指定されている場合などがイメージしやすいかと思います。
See the Pen attribute-~ by Aoi719 (@aoi719) on CodePen.
[属性名|=”属性値”]
属性値の値に完全一致しているか、属性値が「-」で区切られている場合はその前半部分と一致している要素に対してスタイルが適用されます。
See the Pen attribute-| by Aoi719 (@aoi719) on CodePen.
[属性名^=”属性値”]
[]内に記述した”属性値”部分の文字列で始まる属性値を持つ要素に対してスタイルが適用されます。
See the Pen attribute-＾ by Aoi719 (@aoi719) on CodePen.
[属性名$=”属性値”]
[]内に記述した”属性値”部分の文字列で終わる属性値を持つ要素に対してスタイルが適用されます。
See the Pen attribute-$ by Aoi719 (@aoi719) on CodePen.
[属性名*=”属性値の一部分”]
[]内に記述した属性値が部分的に一致していれば、その要素に対してスタイルを適用します。
See the Pen attribute-* by Aoi719 (@aoi719) on CodePen.

結合子

実際のCSSの記述では、セレクタを組み合わせて使用することも多くあります。その組み合わせの際に利用するのが「結合子」というものです。
今回の解説では、先に書かれるセレクタを「セレクタ1」、次に書かれるセレクタを「セレクタ2」とします。

結合子の種類

空白文字（半角スペース）
「セレクタ1 セレクタ2」
セレクタ間を半角スペースで区切るもので、子孫セレクタといいます。セレクタ1の「中の」セレクタ2を対象とします。
>
「セレクタ1 > セレクタ2」
セレクタ間を「>」で区切るもので、直下セレクタといいます。
これはセレクタ1の「直下（直接の子要素）」のセレクタ2を対象とします。
+
「セレクタ1 + セレクタ2」
セレクタ間を「+」で区切るもので、隣接セレクタといいます。
同じ親要素を持つ隣り合った兄弟要素をさします。セレクタ1の「すぐあとにある」セレクタ2を対象とします。
~
「セレクタ1 ~ セレクタ2」
セレクタ間を「+」で区切るもので、間接セレクタといいます。
こちらも「+」と同じく同じ親要素を持つ兄弟要素をさしますが、「+」とは違い隣り合っていなくても対象となります。
同じ親要素の中で、セレクタ1「よりも後にある」セレクタ2に該当する要素をすべて適用対象とします。