CSSの擬似クラス

CSSの擬似クラスとは？

CSSを知っていても、CSSの擬似クラスと言う言葉は、知らない人が居ると思います。有名なのは「a:hover」の「hover」部分です。ここの部分を擬似クラスと言います。擬似クラスには必ず「：」が付きます。

種類

CSS Version 1では４種類だったものが、Version 2で４種類、Version 3 で１６種類も追加されました。

セレクトパターン 概要 Version
Example:link 未訪問のハイパーリンクのソースのアンカーである Example要素 にスタイルを適用 1
Example:visited 訪問済みハイパーリンクのソースのアンカーである Example要素 にスタイルを適用 1
Example:active クリックなどでアクティブになった Example要素 にスタイルを適用 1
Example:hover マウスポインタで指し示された Example要素 にスタイルを適用 1
Example:focus タブキーなどでフォーカスされているときの Example要素 にスタイルを適用 2
Example:lang(fr) 前方一致で fr という lang 属性値を持つ Example要素 にスタイルを適用 2
Example:first-child 親要素の最初の子要素である Example要素 にスタイルを適用 2
Example:root ドキュメント内のルート要素である Example要素 にスタイルを適用（HTMLの場合はhtml) 3
Example:nth-child(n) 親要素の n 番目の子要素である Example要素 にスタイルを適用 3
Example:nth-last-child(n) 親要素の 最後から数えてn番目の子要素である Example要素 にスタイルを適用 3
Example:nth-of-type(n) 兄弟関係にある n 番目の Example要素 にスタイルを適用 3
Example:nth-last-of-type(n) 兄弟関係にある 最後から数えてn 番目の Example要素 にスタイルを適用 3
Example:last-child 親要素の最後の子要素である Example要素 にスタイルを適用 3
Example:first-of-type 兄弟関係にある最初の Example要素 にスタイルを適用 3
Example:last-of-type 兄弟関係にある最後の Example要素 にスタイルを適用 3
Example:only-child 親要素の唯一の（兄弟関係を持たない） 子要素である Example要素 にスタイルを適用 3
Example:only-of-type 兄弟関係にある Example要素 にスタイルを適用 3
Example:empty テキストノードも含めて子要素を持たない Example要素 にスタイルを適用 3
Example:target 参照URIの目標である Example要素 にスタイルを適用 3
Example:enabled 有効な （:enabled）Example要素 にスタイルを適用 3
Example:disabled 無効な （:disabled）Example要素 にスタイルを適用 3
Example:checked ラジオボタンあるいはチェックボックスがチェックされた状態のときに Example要素 にスタイルを適用 3
Example:not(s) sでないセレクタを持つ Example要素 にスタイルを適用 3

最後に

サンプル等を表示しようと思いましたが、省略致しました。数学と同じで基礎なので、これらを組み合わせて応用させた場合無限の可能性が広がります！

Example:first-childのお陰で、リストメニュー等の右端のみ横線無しとか楽になりましたね。（このサイトでは使ってません）。他のブラウザは直ぐに対応（ほぼ対応していますが）してくれるので良いですが、IEのお陰で色々とまだ使えない状況が多いのが現状です。