CSS ・ CSSの記法
疑似クラス
要素の状態や位置で指定する
「マウスが乗っているとき」「最初の要素」のように、要素の状態や位置を条件にして指定する仕組みです。セレクタの後ろに「:（コロン1つ）」を付けて書きます。
01
サンプルコード
HTML
1<ul class="list">
2 <li>ブレンド</li>
3 <li>カフェラテ</li>
4 <li>紅茶</li>
5 <li>ココア</li>
6</ul>
7<a href="#" class="link">マウスを乗せてください</a>
CSS
1.list li:first-child {
2 font-weight: bold;
3}
4.list li:nth-child(even) {
5 background: #f5efe6;
6}
7.link:hover {
8 color: #fff;
9 background: #b68235;
10}
02
実行結果
ブラウザでの表示リンクにマウスを乗せると背景色が変わります
03
解説
疑似クラスは、HTMLにクラスを書かなくても、要素の「状態」や「位置」を条件にして指定できる仕組みです。セレクタの後ろに : を1つ付けて書きます。
:hover（マウスが乗っている）や :focus-visible（キーボードで選択中）のような状態を表すものと、:first-child（最初の子）や :nth-child(even)（偶数番目）のような位置を表すものがあります。上の例では、最初の項目を太字に、偶数番目の行に背景色を付けています。
詳細度はクラスと同じ（≒10点）です。疑似要素（::before など）と名前が似ていますが、疑似クラスは「既にある要素を条件で選ぶ」もの、疑似要素は「要素の一部分や追加の部分を作る」ものです。
04
応用例・注意点
よく使う疑似クラス
| 疑似クラス | 説明 |
|---|---|
:link | 未訪問のリンク |
:visited | 訪問済みのリンク |
:hover | マウスが乗っているとき |
:active | クリックしてから離すまでの間 |
:focus | クリックや Tab キーで選択しているとき |
:focus-visible | キーボードなどでフォーカスしたとき |
:first-child / :last-child | 最初 / 最後の子要素 |
:first-of-type / :last-of-type | 兄弟要素のうち、その種類で最初 / 最後の要素 |
:nth-child(n) | n 番目の子要素（odd・even・2n+1 なども可） |
:nth-of-type(n) | 兄弟要素のうち、その種類で n 番目の要素 |
:not(セレクタ) | そのセレクタに当てはまらないもの |
:checked / :disabled | チェックされている / 無効の入力欄 |
最後の項目だけ区切り線を消す
:not() を使うと「最後以外」を指定できます。
CSS
1.list li:not(:last-child) {
2 border-bottom: 1px solid #ddd;
3}
3の倍数の項目を指定する
:nth-child() には計算式も書けます。
CSS
1.grid > *:nth-child(3n) {
2 margin-right: 0;
3}
:nth-child と :nth-of-type の違い
:nth-child は種類に関係なく数え、:nth-of-type は同じ種類の要素だけを数えます。見出しと段落が混ざっているときに違いが出ます。
HTML
1<div class="post">
2 <h2>見出し</h2>
3 <p>1つ目の段落</p>
4 <p>2つ目の段落</p>
5</div>
CSS
1/* h2 も数えるので「1つ目の段落」が当たる */
2.post p:nth-child(2) { color: red; }
3
4/* p だけを数えるので「1つ目の段落」が当たる */
5.post p:first-of-type { font-weight: bold; }
6
7/* p だけを数えて2番目 →「2つ目の段落」 */
8.post p:nth-of-type(2) { color: blue; }
注意点
- 01コロンの前後に空白を入れないでください（a :hover は「a の中の何かがホバーされたとき」という別の意味になります）。
- 02:nth-child() は「同じ親の中で何番目か」を数えます。種類の違う要素も数に含まれる点に注意します（種類ごとに数えるなら :nth-of-type()）。