CSS3 擬似クラス

CSS3 擬似クラス

CSS2までの擬似クラスは、閲覧者が単純なアクションを起こした際にスタイルを適応させるための仕組みとして主に使用されていました。CSS3では、非常に多くの擬似クラスが追加されました。これにより、これまでの擬似クラスの用途を大きく超えた可能性が拡がった印象を受けました。

今回は、CSS3において追加された擬似クラスの傾向と印象をサンプルも交えてまとめていこうと思います。

関連記事：

目次

CSS2までにサポートされた擬似クラス

では、以下の表に、CSS2までにサポートされた全擬似クラスを簡略にまとめます。
（この記事は、CSSの基本知識がある方が読むことを想定してます。その為、CSSに関しての基礎的な説明は省略することをご了承下さい。）

CSS 1

擬似クラス名 擬似クラスが指し示す対象
:link 未訪問のリンク a[href] 要素のみ
:visited 訪問済みのリンク a[href] 要素のみ
:active 訪問済みのリンク CSS2 では任意の要素

CSS 3

擬似クラス名 擬似クラスが指し示す対象
:hover カーソルが上に乗っており、且つアクティブでない要素
:focus テキスト入力にフォーカスされている要素
:first-child ある親要素の最初の子要素

CSS3で新しくサポートされた擬似クラス

擬似クラス名 擬似クラスが指し示す対象
:last-child ある親要素の最後の子要素
:target フラグメント識別子を持ってるurlリンクでターゲット対象にされた要素
:enabled ある要素が有効な時（フォームとか）
:disabled ある要素が無効な時（フォームとか）
:checked ラジオボタン、チェックボックスがチェックされた状態の時
:indeterminate ラジオボタン、チェックボックスがチェックされてるかどうか不確定の状態の時
:root ドキュメントルートの要素
:nth-child(n) 親要素のn番目の子要素
:nth-last-child(n) 親要素の最後から数えてn番目の子要素
:nth-of-type(n) 親要素の中で兄弟関係にある同じ種類の要素の中のn番目の要素
:nth-last-of-type(n) 親要素の中で兄弟関係にある同じ種類の要素の中最後から数えてn番目の要素
:first-of-type 親要素の中で兄弟関係にある同じ種類の要素の中の最初の要素
:last-of-type 親要素の中で兄弟関係にある同じ種類の要素の中の最後の要素
:only-child 兄弟を一つも持たない、その親の唯一の子である要素
:only-of-type 同じ要素の兄弟が一つもない要素
:empty 子要素を一つも持たない要素
:contains() テキストの内容が与えられた部分文字列を含む要素
:not() 「なになにではない（否定）場合」の要素

表を見てみると、CSS3では、これまでと比較にならないほど多くの擬似クラスがサポートされたことが分かります。特に印象的だったのは、CSS3ではCSS2で提唱されてた:first-childを典型とするような、「要素の位置をツリー構造（親・子）から計算して特定の要素にマッチングさせる」擬似クラスが多く加わっている点です。

実践してみよう

では、このような擬似クラスを使用してどのようなことが出来るでしょうか？Web上で日常的に用いられているパーツを例に挙げて実践してみます。

要素の位置を算定する「:nth-child()」

:nth-child(n)は、指定された要素が親から見てn番目の子供である要素を指定することが出来ます。

テーブルでカレンダーを作成する

blogパーツなどで使われることが多いテーブルで構成されたカレンダーです。このようなカレンダーでは、日付、またそれに対応する曜日が動的に変動する為、特定の位置の要素にCSS記述だけでスタイルを指定をするということは出来ません。
CSS3では、:nth-child()を使用することでこのような場合の要素指定を簡単に書くことが出来ます。

/* trの子として1番目のtdのテキストカラーを赤にする */
tr td:nth-child(1){
   color:red;
}

/* trの子として7番目のtdのテキストカラーを青にする */
tr td:nth-child(7){
   color:blue;
}

また、:nth-child()や:nth-last-child()の様な擬似クラスでは、数値（ｎ）の変わりに(odd)や(even)を書くことにより、偶数と奇数の指定をすることも出来ます。
これを使用することにより、次のようなパーツを作成することが出来ます。

リストで一行毎に背景色を変える

/* 奇数列の背景色をグレーにする */
li:nth-child(odd) {
	background-color:#CCFFFF;
}


/* 偶数列の背景色をイエローにする */
li:nth-child(even) {
	background-color:#FFFFCC;
}

新しく追加された擬似クラスが持つ可能性

CSS3で新しい擬似クラスが追加されたことにより、いままでJavaScriptなどでプログラミングされていた動的な要素へのスタイルの指定も単純なCSSのみで構成することが出来るようになりました。ツリー構造を認識し判定できる擬似クラスが増えたことにより、HTMLとCSSだけで構成することができる範囲がぐっと広がったと思います。今までは静的要素への指定だけに留まっていたCSSの動きが、動的な要素にも対応するちょっとしたプログラミングのようになった印象です。

CSS3が全ブラウザに完全に対応するのはまだまだ先のことになりそうですが、これらのセレクタが使えるようになればソース上から余分なIDやクラスの記述なども減らすことができそうです。

関連記事：

Page Top