女性向けエンジニアスクール
3秒でわかる
要素の状態や並び順に応じて当たるCSSセレクタの拡張。マウスを乗せた間だけ色を変える指定を、HTMLを触らずに書けます。
もう少し詳しく
どういうものか
擬似クラスは、セレクタの後ろにコロンと名前を付けて、要素が特定の状態や位置にあるときだけスタイルを当てる書き方です。hover はマウスが乗っている間、focus は入力欄が選択されている間、first-child は親の中の最初の子であるとき、nth-child は数えて何番目かで対象を選びます。HTMLにクラスを足さずに条件分岐できる点が特徴です。
なぜ必要か
マウスが乗っている、入力欄が選択されている、リンクを踏んだことがある、といった状態はHTMLに書かれていません。ブラウザだけが知っています。擬似クラスはその状態をCSSから参照する唯一の手段です。JavaScriptでクラスを付け外しして同じことをすると、コード量が増えるうえ動作も遅くなります。
具体例
.btn {
background: #0071e3;
color: #fff;
transition: background .2s;
}
.btn:hover { background: #005bbb; }
.btn:focus-visible { outline: 2px solid #ffb300; }
.btn:disabled { background: #ccc; cursor: not-allowed; }
/* 表の偶数行だけ薄く塗る */
tr:nth-child(even) { background: #f5f5f5; }
/* 最後の項目だけ下線を消す */
.menu li:not(:last-child) { border-bottom: 1px solid #ddd; }つまずきやすいところ
擬似要素との書き分けを間違える例が多く見られます。状態を選ぶ擬似クラスはコロン1つ、before や after のように要素を作り出す擬似要素はコロン2つが本来の書き方です。もうひとつ、a に対するスタイルは書く順番で結果が変わります。link visited hover active の順に書かないと、後から書いた規則に上書きされて反応しなくなります。またタッチ端末には hover の状態が無いため、そこだけに情報を隠すと押せない機能が生まれます。
覚え方
「今どうなっているか」で選ぶのが擬似クラス、「無い部分を足す」のが擬似要素です。前者は状態、後者は生成と覚えると混ざりません。
似た用語との違い
| 語 | 内容 |
|---|---|
| 擬似クラス | 状態や並び順で要素を選ぶ |
| 擬似要素 | 存在しない部分を作って装飾する |
| 属性セレクタ | HTMLに書かれた属性の値で選ぶ |
どれもHTMLを書き換えずに対象を絞り込む手段で、状態か生成か属性かで役割が分かれています。
