49.擬似クラスって何? ~要素の状態に対してスタイルを適用~
CSSの擬似クラスってご存知ですか。
私は「使っているが、名前は抜け落ちている」そんな状態です。
「これ、そういう名前だったのね。」という感じです。
まず、擬似クラスについて概要を確認して、
それから各疑似クラスを見ていこうと思います。
それでは早速やっていきましょう。
擬似クラスとは
擬似クラスは通常のセレクタに付け加えるもの。
そうするで、セレクタで指定されている要素の「状態」に応じて
スタイルを適用できます。
…こうして言葉で言われても、イマイチイメージわかないですよね。
実際の適用例を見ると大体「あぁ、なんだこれのことか」となると思います。
擬似クラスを使ってみる
早速、具体例を見ていきましょう。
セレクタ : 擬似クラス{
~擬似クラスで指定した状態になった時に適用されるスタイル~
}
もう気づいた方も多いと思います。
a:hover {
~適用するスタイル~
}
これです。
もったいぶった割に、結構使っていますよね。
どんな種類があるの?
よく使うhoverは知っているけれど、他にどんな疑似クラスがあるのか?
調べてみました。
分類だけで以下の種類があります。
- ユーザー操作擬似クラス
- 入力擬似クラス
- 言語擬似クラス
- 位置擬似クラス
- 時間軸擬似クラス
- リソース状態擬似クラス
- ツリー構造擬似クラス
ちょっと想像していたよりも種類が多いですね…。
ユーザー操作疑似クラス
気を取り直して、確認していきましょう。
:hover
言わずとしれた、「マウスが要素に乗った状態」を指定できます。
:active
「要素がクリックされている状態」を指定できます。ドラッグ中は適用されるようです。
:focus
「要素が選択されている状態」を指定できます。入力欄をクリックしたり、Tabキーなどで移動した際にフォーカスがある場合、スタイルが適用されます。
:focus-within
「子孫要素が選択されている状態」を指定できます。フォームで使うと良い感じの挙動をさせることができるようです。素敵な記事を見つけたのでリンクを張っておきます。
ユーザー操作疑似クラスは使用頻度高そうですね。
今後他の擬似クラスについても見ていきます。
今日のまとめ
- 擬似クラスは要素の状態を指定して、スタイルを適用できる仕組み。
- 種類が多く、必要なものをかいつまんで覚えるのが良いかもしれない。
- focus-withinの使い所はありそう。
本日は疑似クラスのユーザー操作擬似クラスをメインにやってきました。
状態の指定って、jQueryとかのイベントに似ていますよね。
近いうちに「疑似要素」についても色々試してみたいと思います。
では、また。