セレクタとは「HTMLのどの要素にスタイルを適用するか」を指定するためのもの。
CSS2以降で定義され、CSS3で強化されました。
要素セレクタ、クラスセレクタ、IDセレクタ
基本的なセレクタ
・要素セレクタ（HTML要素に対して適用）
div { background-color : red; }
・クラスセレクタ（特定のclass属性値を与えられた要素に対して適用）
.name { background-color : red; }
・IDセレクタ（特定のid属性値を与えられた要素に対して適用）
#zokusei { background-color : red; }
子孫セレクタ
特定の範囲内のさらに一部の要素だけを指定できるセレクタのこと。
・子孫セレクタ（div要素の子要素となるp要素のみに適用）
div p { background-color : red; }
・子孫セレクタ（div要素の子要素の内、idがshisonの要素のみに適用）
div #shison { background-color : red; }
擬似クラスセレクタ
「最初の要素」「最後の要素」といった条件によって自動的に対象の要素を選ぶことができる。
同じ要素がいくつも並ぶような状況では擬似クラスセレクタが効果的。これまでは、並んでいる要素内の最初か最後だけスタイルを変えたい場合は、その要素に対して.firstや.lastとクラス名をつける必要があった。
擬似クラスセレクタを使えば、すべての要素を同じように書くことができ、後から要素を追加・削除した場合は、自動的に最初または最後の要素だけスタイルが変化する。
主な擬似クラスセレクタ
| 擬似クラスセレクタ | スタイルが適用される要素 |
|---|---|
| （要素名）:first-child | 親要素の最初の子要素となる要素 |
| （要素名）:last-child | 親要素の最後の子要素となる要素 |
| （要素名）:nth-child(n) | 親要素のn番目の子要素となる要素 |
| （要素名）:nth-child(odd) | 親要素の奇数番目の子要素となる要素 |
| （要素名）:nth-child(even) | 親要素の偶数番目の子要素となる要素 |
| （要素名）:first-of-type | 親要素の子要素として最初に出現する要素 |
| （要素名）:last-of-type | 親要素の子要素として最後に出現する要素 |
| （要素名）:nth-of-type(n) | 親要素の子要素としてn番目に出現する要素 |
最後のli要素のmargin-bottomを0にしたい場合
クラスセレクタを使用
CSS
.parent li {
margin-bottom:15px;
}
.parent li.last {
margin-bottom:0;
}
HTML
<ul class="parent">
<li>最初の項目</li>
<li>2番目の項目</li>
<li class="last">最後の項目</li>
</ul>
擬似クラスセレクタを使用
CSS
.parent li {
margin-bottom:15px;
}
.parent li:-child {
margin-bottom:0;
}
HTML
<ul class="parent">
<li>最初の項目</li>
<li>2番目の項目</li>
<li>最後の項目</li>
</ul>