目次

:first-child疑似クラス

リンクの疑似クラス

動的な疑似クラス

CSS1とCSS2の非互換部分

InternetExplorerの':hover'問題

疑似クラスの記述上の注意

言語に関する疑似クラス

ページ媒体の疑似クラス

複数使用可能な疑似クラス

疑似クラス

疑似クラスというのは、状況による分類をします。属性セレクタに似た参照をしますが、属性から参照出来ないものもあります。

疑似クラスは、状況による分類をするものですので、演繹が出来ません。つまり、ソースを見ただけでは、どの要素が該当するのか、どう表示したら良いのかが判断出来ません。例えば、そのリンクを訪れたかどうかは、ソースを見ただけでは判断出来ません。

大文字・小文字の区別はありません。

CSS1とCSS2の相違点

1. CSS1では疑似クラスはクラスセレクタの後に書くようになっていましたが、その記述がなくなりました。

:first-child疑似クラス

この疑似クラスは、親要素から見て一番初めの子要素にマッチします。

例を利用して説明します。
div > p:first-child { text-indent: 0 }
上記のようなスタイルシートがあったとします。この場合、div要素 の直接の子供で、且つ一番初めに登場する p要素 という事になります。で、以下のようなHTMLを考えてみましょう。
<p> 注釈の直前の p要素 です。</p>
<div class="note">
   <p> 注釈内の初めの p要素 です。</p>
</div>
この場合、2つ目の p要素 に宣言が適用されます。もう一つ、例を見てみましょう。
<p> 注釈の直前の p要素 です。</p>
<div class="note">
   <h2>注釈</h2>
   <p> 注釈内の初めの p要素 です。</p>
</div>
この場合、p要素 は div要素 の直接の子供でも、h2要素の次、つまり2番目に来ていて、一番初めではありませんので、宣言は適用されません。

これは疑似クラスですので、セレクタ内の任意の全称セレクタ及びタイプセレクタのあとに書けます。以下のような事も出来ます。
p:first-child em { font-weight : bold }
上記の宣言は、
<div class="note">
   <p> 注釈内の<em>初め</em>の<em>p</em>要素です。</p>
</div>
上の例文中の em要素 すべてに宣言が適用されます。この場合、子孫セレクタになっていますから、入れ子になっていても、大丈夫です。
<div class="note">
   <p> 注釈内の<i><em>初め</em>の<em>p</em>要素</i>です。</p>
</div>

以下のようなHTMLの例も見てみましょう。
<div class="note">
   <p> 注釈内の初めの p要素 です。</p>
   <p> 注釈内の<em>2番目</em>の<em>p</em>要素です。</p>
</div>
この場合、2つ目の p要素 は、div要素 の直接の子供であっても、2番目に来ていますので、その中の em要素 に宣言は適用されません。

リンクの疑似クラス

リンクの疑似クラスですので、リンク機能を持った要素以外に指定しても、意味がありません。UAでは、一般的に、未だ訪れていないリンクは青色で、既に訪れたリンクは赤紫色で表示されます。それをCSSで制御しよう、というものです。以下の2種類が定義されています。

':link'疑似クラス

未訪のリンクに当てはまります。
HTMLにある body要素 の link属性 に当たります。

':visited'疑似クラス

ユーザが閲覧済みのリンクに当てはまります。
HTMLにある body要素 の vlink属性 に当たります。

HTMLでは、リンクとしての機能を持っているのは、href属性 を伴った a要素 だけですので、
a[href]:link { color: red }
a[href]:visited { color: green }
は、省略して、
:link { color: red }
:visited { color: green }
と書く事が可能です。XMLでは、リンク機能を持った要素が必ずしも1つではありませんので、定義した人自身が注意する必要があります。

省略した時の詳細度は10になります。ユーザ・スタイルシートの事を考えると、念の為にaは付けておいたほうが良いかもしれません。[href]を付けないのは、最もシェアの高いUAが対応していない為です。

CSSを用いる利点の一つは、属性セレクタを使ってリンクごとに設定を変える事が出来るという事です。
.external:visited { color: blue }
と書くと、class属性値 にexternalを含む a要素 のみ、訪れた後、リンクの色は青くなります。以下のようにして使用します。
<a class="external" href="http://out.side/">external link</a>
この a要素 は、訪れた後戻ってくると、青色で表示されているはずです。

ですが、あまり色を変え過ぎて、サイト内の一貫性がなくならないように気を付けましょう。

リンク関連と動的な疑似クラスの記述上の注意も重ねてご覧ください。

動的な疑似クラス

CSS1ではこのようなクラスは定義されていませんでした。':active'しか無く、その定義も曖昧でした。CSS2ではその意味が明確にされると共に、拡充されました。大きな変更点として、リンク機能を持った要素以外にも適用出来るようになりました。CSS2では、':active'のほか、':hover'、':focus'の3つの疑似クラスが定義されています。

':hover'

対応状況

N7.0 Win	N6.0 Win	e6.0 Win	e5.5 Win	e5.0 Win	e5.0 Mac	e4.5 Mac	O7.0 Win	O6.0 Win
○	○	○	○	○	○	○	○	○

レベル	2-

ユーザが何らかのポインティングデバイスで指し示していて、且つアクティブ状態では無い要素に当てはまります。
具体例を挙げると、当該要素の上にカーソル(マウスポインタ)がある時です。

InternetExplorerの :hover 問題、リンク関連と動的な疑似クラスの記述上の注意も重ねてご覧ください。

':active'

対応状況

N7.0 Win	N6.0 Win	e6.0 Win	e5.5 Win	e5.0 Win	e5.0 Mac	e4.5 Mac	O7.0 Win	O6.0 Win
○	○	○	○	○	○	○	○	○

レベル	-

ユーザによってアクティブ状態にされている要素に当てはまります。
ユーザがマウスのボタンを押した後、リンクにフォーカスされている状態でエンター/リターンキーを押した後などがこのケースに相当します。
HTMLで言うところの、alink属性 に相当します。

CSS1とCSS2の非互換部分、リンク関連と動的な疑似クラスの記述上の注意も重ねてご覧ください。

':focus'

対応状況

N7.0 Win	N6.0 Win	e6.0 Win	e5.5 Win	e5.0 Win	e5.0 Mac	e4.5 Mac	O7.0 Win	O6.0 Win
○	○	×	×	×	○	×	○	×

レベル	2-

キーボード動作やその他のテキスト入力でフォーカスされている要素に当てはまります。
タブキーやアクセスキーを使ったリンクへのアクセスが、当てはまります。

リンク関連と動的な疑似クラスの記述上の注意も重ねてご覧ください。

この疑似クラスは、動的ですので、インタラクティブ、つまり双方向なUAに対してのみ有効です。詳細はメディアタイプのメディアグループの項をご覧ください。

注意点

1. 結果的にこれらの疑似クラスは無視しても良い事になっています。

CSS1とCSS2の非互換部分

CSS2では、':active'疑似クラスはすべての要素に適用可能になりました。単に":active"とすると、すべての要素にこのセレクタがマッチしてしまいます。かと言って、今度は、"a:active"とすると、a要素 すべて、つまり href属性 を持たない要素にも、適用されてしまいます。CSS1では、"[属性名]"はサポートされていないので、"a[href]:active"とすると、今度はCSS1のみに準拠したUAは無視してしまいます。あちらを立てればこちら立たず、ここは"a:active"として妥協しましょう。

ほかにもまだ、問題があります。この3つの疑似クラスは、互いに排他的では無いと仕様書には書いてあるのですが、':hover'疑似クラスは"アクティブ状態では無い"と明言してあるので、実は':active'疑似クラスと互いに排他的なのです。どちらかと言えば、前者のほうが正しいかと思いますが。

InternetExplorerの':hover'問題

InternetExplorerでは、[属性名]をサポートしていないのに、':hover'疑似クラスはサポートしているのです。どういう事かと言いますと、"a[href]:hover"としては反応しないのに、":hover"としたり、"a:hover"とした場合のみにリンク部分だけ反応するという、また困った状態なのです。現状では"a:hover"で妥協しておくのが一番でしょう。

リンクと動的な疑似クラスの記述上の注意

これら疑似クラスを併用する時は、必ず

1. ':link'、':visited'
2. ':focus'、':hover'
3. ':active'

の順に書きます。"カスケード"についてにあるように、詳細度が同じ場合はより後ろにあるほうが優先されますので、同じプロパティを設定している場合、':focus'や':hover'は':link'や':visited'の前にあると、':active'は':focus'や':hover'の前にあると実質無視されてしまう からです。

言語に関する疑似クラス

その要素に設定されている言語属性を参照して、その言語情報がマッチした場合に宣言を適用する為のクラスです。例えば、HTMLでは lang属性 や meta要素 で、XMLでは xml:lang属性 で、その文書がどの言語で書かれているのかを示す事が出来ます。それを参照するのです。

使用例を見てみましょう。
q:lang(fr) { quotes: '«' '»' }
q:lang(de) { quotes: '»' '«' '¥2039' '¥203A' }
この場合、q要素 の言語関連属性(HTMLなので lang属性)に fr 又は de から始まる項目を含んでいる場合に、q要素 全体にこの宣言を適用します。この例はHTMLですから、
q[lang|=fr] { quotes: '«' '»' }
q[lang|=de] { quotes: '»' '«' '¥2039' '¥203A' }
とほぼ等価です。

ページ媒体の疑似クラス

ページ媒体というのは、大体の場合「本」です。本は大きく、見開きのページと、右のページ、左のページ等に分ける事が出来ます。これは、それらを参照する為の疑似クラスです。

:first

最初のページ。見開きのページを指します。

:left

左のページを指します。

:right

右のページを指します。

使い方は少々特殊です。先ず、以下に示す例のように、@page規則内で使用する必要があります。
@page :left {
  margin-left: 4cm;
  margin-right: 3cm;
}

@page :right {
  margin-left: 3cm;
  margin-right: 4cm;
}

次に、疑似クラスの中では特別に、':first'がほかの2つの疑似クラスより優先します。つまり、':first' > ':left' / ':right' > 何もなし、という順番になります。

しかし、'page'で付けたページ識別子(つまり個々のページの名前)とこれら疑似クラス、どちらが優先するのかについては記述がありません。飽くまで推測ですが、ページ識別子が最も優先するでしょう。

この疑似クラスをページセレクタに含むかどうかも、記述がはっきりしません。

複数使用可能な疑似クラス

疑似要素と疑似クラスの大きな違いの1つです。':link'疑似クラスと':visited'疑似クラスは互いに排他的ですが(未だ訪れた事がなくて、且つ、訪れた事のあるリンクなんて、ありませんよね)、それ以外の疑似クラスは、互いに排他的ではありません。ですから、同時に指定する事も出来るのです。例えば、こうです。
:visited.stock:first-child[name]:hover:active:lang(ja) { color: red }
この宣言は、そのリンクが、既読リンクで、class属性値 にstockがあって、ポインタがリンク上に乗っていて、アクティブな状態で、name属性 が設定されていて、lang属性値 にjaを含む値があって、何らかの要素の最初の子要素である場合に、適用され、文字色が赤くなります。

また、疑似要素と異なり、セレクタの主体以外にも設定出来ます。