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のお陰で色々とまだ使えない状況が多いのが現状です。