web制作のしおり

日々の学習をアウトプットします。

49.擬似クラスって何? ~要素の状態に対してスタイルを適用~

CSSの擬似クラスってご存知ですか。

 

私は「使っているが、名前は抜け落ちている」そんな状態です。

「これ、そういう名前だったのね。」という感じです。

 

まず、擬似クラスについて概要を確認して、

それから各疑似クラスを見ていこうと思います。

 

それでは早速やっていきましょう。

 

擬似クラスとは

擬似クラスは通常のセレクタに付け加えるもの。
そうするで、セレクタで指定されている要素の「状態」に応じて

スタイルを適用できます。

 

…こうして言葉で言われても、イマイチイメージわかないですよね。

 

実際の適用例を見ると大体「あぁ、なんだこれのことか」となると思います。

 

擬似クラスを使ってみる

早速、具体例を見ていきましょう。

 

セレクタ : 擬似クラス{

~擬似クラスで指定した状態になった時に適用されるスタイル~

}

 

もう気づいた方も多いと思います。

 

a:hover {

~適用するスタイル~

}

これです。

もったいぶった割に、結構使っていますよね。

 

 

どんな種類があるの?

よく使うhoverは知っているけれど、他にどんな疑似クラスがあるのか?

調べてみました。

分類だけで以下の種類があります。

 

  • ユーザー操作擬似クラス
  • 入力擬似クラス
  • 言語擬似クラス
  • 位置擬似クラス
  • 時間軸擬似クラス
  • リソース状態擬似クラス
  • ツリー構造擬似クラス

ちょっと想像していたよりも種類が多いですね…。

 

ユーザー操作疑似クラス

気を取り直して、確認していきましょう。

 

:hover

言わずとしれた、「マウスが要素に乗った状態」を指定できます。

 

:active
「要素がクリックされている状態」を指定できます。ドラッグ中は適用されるようです。

 

:focus
「要素が選択されている状態」を指定できます。入力欄をクリックしたり、Tabキーなどで移動した際にフォーカスがある場合、スタイルが適用されます。

 

:focus-within
「子孫要素が選択されている状態」を指定できます。フォームで使うと良い感じの挙動をさせることができるようです。素敵な記事を見つけたのでリンクを張っておきます。

coliss.com

 

ユーザー操作疑似クラスは使用頻度高そうですね。

今後他の擬似クラスについても見ていきます。

 

今日のまとめ

  • 擬似クラスは要素の状態を指定して、スタイルを適用できる仕組み。
  • 種類が多く、必要なものをかいつまんで覚えるのが良いかもしれない。
  • focus-withinの使い所はありそう。

 

本日は疑似クラスのユーザー操作擬似クラスをメインにやってきました。

状態の指定って、jQueryとかのイベントに似ていますよね。

 

近いうちに「疑似要素」についても色々試してみたいと思います。

 

では、また。