頻出するCSSセレクタの使い方をまとめる。
対象読者
- HTMLとCSSを初めて触る人。
- CSSのセレクタ周りの理解を有耶無耶にしていた人。
CSSの注意点
- CSSの文法に全角文字および、全角スペースを使用することはできない。
- セレクタ(id、class)の頭文字に数字を使用することはできない（例:2linesなど）。
- スタイルの適用順位はポイント制となっており、より獲得ポイントが高いセレクタを持つスタイルが優先される（see CSSのスタイル適用の優先順位について）。
セレクタの基本的な使い方
CSSにはHTMLの構造から要素を選択するために「要素」、「属性」、「id」、「class」の4つの選択方法が用意されている。
html
<div id="foo"></div>
<input type="text" name="bar">
<div class="baz"></div>
css
/* 要素選択 */
div {
}
/* 属性選択 */
[name="bar"] {
}
/* id選択 */
#foo {
}
/* class選択 */
.bar {
}
4つのセレクタの使い分けは以下のようになる。
- 要素選択は、全ての要素に適用されてしまうので、使うのが難しい。HTMLの規模が大きくなるとこの選択方法では対応することが難しくなる。
- 属性選択は、要素選択と同じ理由で使うのが難しいセレクタである。ただし、input要素のような一意の属性名と属性値を持つ要素を選択する場合のみ、cssの使い回しを想定しない箇所で使用することが可能である。
- id選択は、cssの使い回しを想定しない箇所で使用する。htmlの原則として1つのidは1ページに1度までしか使用できない（a要素によるページ内リンクの仕様のため）というのが理由である。
- class選択は、1番よく使用する選択方法である。html内では好きな箇所で何度使っても良いので、迷ったら要素にclass属性を付けておいて、これで選択するのが無難と言える。
階層構造になった要素を選択する
要素が階層構造になっている場合は、いくつかのセレクタを記述することで要素を選択することができる。
- 半角スペースで区切って記述することで、要素の階層構造を表現することができる。
- 半角スペースを入れずに繋げて記述することで、要素、id、クラスなどを同時に持つことを表現することができる。
- カンマで区切ることで複数の要素を選択することができる。
- プラスで区切ることで隣接する要素を選択することができる（チェックボックスをクリックしたときにその直後の要素にスタイルを適用したいことがよくある）。
html
<div class="foo">
<p class="bar">
<span class="baz" id="hello">hello</span>
<span class="baz" id="world">world</span>
</p>
</div>
css
/* class foo内のclass barを選択する */
.foo .bar {
}
/* class foo内のclass bar内の要素spanを選択する */
.foo .bar span {
}
/* class bazとid worldを同時に持つ要素を選択する */
.baz#world {
}
/* カンマで区切ると複数の要素を選択することができる */
.foo .bar #hello,
.foo .bar #world {
}
/* プラス記号で区切ると要素に隣接した要素を選択することができる */
.foo .bar #hello + span {
}
擬似要素と疑似クラスについて
セレクタの最後にコロンを付けて要素を選択する方法があり、これを「疑似要素」または「擬似クラス」という。
要素内の直前、要素内の直後に要素を挿入する
要素の頭に画像を挿入したいときなどに使用することが多い。
:beforeでは、要素内の直前に要素を挿入することができる。:afterでは、要素内の直後に要素を挿入することができる。
html
<p>Hello</p>
css
/* 要素内の直前（h2要素内のHello文字列の前）に要素を挿入する */
p:before {
content: url("../img/sample.png");
}
/* 要素内の直後（h2要素内のHello文字列の後）に要素を挿入する */
p:after {
content: " world.";
}
上記は<p>[画像]Hello world.</p>というHTMLになる。
beforeとafterにはcontentプロパティが必須である。また、擬似的な（本来は存在しない）要素なので、DOMでは疑似要素を扱うことができない。つまり、Javascriptで疑似要素に対してクリックイベントなどを設定することはできない。
「何番目」の要素を選択する
同じ要素がいくつもある場合、要素の「何番目」という選択をする方法がある。これはリストの要素を選択するときによく使用する。
| 種類 | 書き方 | 補足 |
|---|---|---|
| 最初 | :first-child | |
| 最後 | :last-child | |
| n番目 | :nth-child(n) | 数字以外にもodd（奇数番目）、even（偶数番目）を指定可能 |
| 後ろからn番目 | :nth-last-child(n) | 数字以外にもodd（奇数番目）、even（偶数番目）を指定可能 |
html
<ul>
<li>Hello</li>
<li>World</li>
<li>こんにちは</li>
<li>世界</li>
</ul>
css
/* 最初のli要素を選択する */
ul li:first-child {
}
/* 最後のli要素を選択する */
ul li:last-child {
}
/* 3番目のli要素を選択する */
ul li:nth-child(3) {
}
/* 奇数番目のli要素を選択する */
ul li:nth-child(odd) {
}
/* 偶数番目のli要素を選択する */
ul li:nth-child(even) {
}
要素の状態を見て選択する
:hoverでは、要素の上にカーソルが乗っている状態のときに選択することができる（a要素でリンクを作るときによく使用する）。:checkedでは、チェックボックスにチェックが入っているときに選択することができる。:focusでは、要素にフォーカスが合っている状態（フォームにカーソルを合わせて入力できる状態など）のときに選択することができる。:enabledと:disabledでは、それぞれ要素が有効、要素が無効（フォームのテキストエリアに入力できる状態とできない状態など）のときに選択することができる。
html
<a href="http://example.com/">Go to example.</a>
<form>
<input type="checkbox" name="" checked>
<input type="text" name="" enabled value="入力可能">
<input type="text" name="" disabled value="入力不可">
</form>
css
/* a要素にカーソルを載せたときに選択する */
a:hover {
}
/* input要素のtype属性がcheckboxを持つチェックが付いた状態になっている要素を選択する */
input[type="checkbox"]:checked {
}
/* input要素のtype属性がtextを持つ要素にフォーカスが合ったときに選択する */
input[type="text"]:focus {
}
/* input要素のtype属性がtextを持つ有効状態になっている要素を選択する */
input[type="text"]:enabled {
}
/* input要素のtype属性がtextを持つ無効状態になっている要素を選択する */
input[type="text"]:disabled {
}