疑似クラス（pseudo-classes）

CSS では，文書構造以外の情報に基づいた整形を行うために疑似クラス（pseudo-classes）の概念が導入されています。

疑似クラスは，要素型の名称，属性，内容など，ツリー構造では導き出すことができない特徴に基づいた"分類（classify）"を行います。

ユーザーからの働きかけによって要素が疑似クラスを獲得したり失ったりするという意味において，疑似クラスは動的であると言えます。

  • ただし:first-child疑似クラスは例外で，ツリー構造から導き出すことができます。
  • および:lang()疑似クラスも，幾つかのケースで文書の構造から導き出すことができます。

疑似クラスはセレクタ内の単純セレクタに自由に取り付けられるので，ひとつの要素に複数の疑似クラスを割り当てることも可能です（ただし，疑似クラスの中には互いに排他的なものもあります）。

複数の疑似クラスが互いに競合する場合，カスケードの順序によって決定されます。

リンクに関する疑似クラス（The link pseudo-classes）

User Agent は通常，未訪問のリンクか，閲覧済みのリンクかによってすなわち，ユーザー環境の履歴情報に基づいてハイパーリンクのアンカーを区別して表現します。

CSS では，この2つの状態を区別するために :link および :visited疑似クラスが提供されています：

要素型名:link

始点アンカーを生成する要素のうち，そのリンク先を訪れたことがないものに当てはまります。

要素型名:visited

始点アンカーを生成する要素のうち，ユーザーがそのリンク先を閲覧済みのものに当てはまります。

これらの疑似クラスは未訪問かつ閲覧済みという状況はあり得ないのでひとつの要素が同時にマッチすることはありません。

例

例えば HTML 4 であれば，これら疑似クラスはhref属性を持つa要素に当てはまります。

a:link {
color: #00f; background: transparent;
 }

a:visited {
 color: #008; background: transparent;
 }

どの要素型がハイパーリンクのアンカーであるかは構造化言語によって異なるので，次のように記述することも可能です。

:link{
 color: #00f; background: transparent;
 }

:visited {
 color: #008; background: transparent;
 }

参考

  • a href="http://www.usability.gr.jp/alertbox/20040510.html">Alertbox: リンクを視覚化するためのガイドライン【U-Site】
  • a href="http://www.usability.gr.jp/alertbox/20040503.html">Alertbox: 訪問済みリンクの色は変えるべし【U-Site】

ダイナミック疑似クラス（The dynamic pseudo-classes）

CSS2 では，双方向メディア環境でユーザーの操作に反応する一般的な場合として，次の3つの疑似クラスが提供されています：

要素型名:hover

ユーザーがマウスなどのポインティングデバイスで指し示しており，かつアクティブ状態ではない要素に当てはまります。

（例えば，一般的なグラフィカルなウェブブラウザでは，当該要素が生成したボックスの上にカーソルを重ね合わせたときに，この疑似クラスは適用されます。）

要素型名:active

ユーザーの操作によってアクティブ（マウスのボタンを押してから放すまでの間などの）状態になっている要素に当てはまります。

マウス以外にも，キーボードのEnter（もしくはReturn）キーなどでアクティブにされた場合にも，適用されるかもしれません。

要素型名:focus

ユーザーの操作によってフォーカスされている状態の要素に当てはまります。

例えば，キー操作（Tabキーなど）によって選択中の要素や，入力フィールドに入力可能な状態の時などに適用されます。

これらの疑似クラスは互いに排他的ではないので，一つの要素が同時に複数の疑似クラスにマッチすることができます。

例

始点アンカーに:hover疑似クラスを設定する場合には，:link と :visited の後，:active よりも前に記述してください：

a:link { color: red;}

a:visited { color: purple;}

a:hover { color: green; }

a:active { color: maroon; }

この順序ではない場合，例えばa:link とa:visited よりも前にa:hover がある場合，a:hover のcolorプロパティはカスケード処理の規則により上書きされてしまうので，ホバー状態でも前景色は変化しないことになります。

また，a:active よりも後にa:hover がある場合，マウスでアンカーをアクティブにしても前景色は変化しません。

なぜかというと，ユーザーはホバー状態にしてからアクティブにするという順序で操作するのですが，規則の順序がユーザー操作と逆なので，後にあるa:hover が優先されてしまうのです。

動的な疑似クラスの組み合わせ例：

textarea:focus {
 color: MenuText; background: Menu;
}

textarea:focus:hover {
 color: InfoText; background: InfoBackground;
}

2番目の規則は，テキストエリアにフォーカスされた時（入力可能な状態）で，かつホバー状態の時に当てはまります。

  • 疑似クラスの変化に伴って，UA が現在表示している文書全体を再び流し込む必要はないとされています。

    例えば，アクティブな始点アンカーのフォントサイズを通常より大きく指定しても，流し込みの再開を避けるために対応する規則を無視するかもしれません。

  • ダイナミック疑似クラスは，あらゆる要素について考えることが可能ですが，実際にどの要素型がどのダイナミック疑似クラスに属するのか，どんな状態がどのダイナミック疑似クラスに対応するのか，については定められておらずUAの実装に依存します。
  • CSS1での:active疑似クラスは，アンカー疑似クラスとして定義されており，:link，:visited疑似クラスと互いに排他的でした。

参考

言語に関する疑似クラス（The language pseudo-class）

構造化言語で各要素の自然言語日本語，英語，手話，点字などのように，話したり書いたり身振りなどによって表現される，人間が意志を伝達するのに用いる言語の指定方法が決まっている場合，CSS2 からはその言語情報に基づいたマッチングを行うことができます。

自然言語の言語情報は，HTML 4 であればlang属性，XML応用であればxml:lang属性によって指定することができます。

またこれら以外にも，HTML文書内のmeta要素や，HTTPヘッダなどのようなプロトコルからの情報によって，言語情報が決定されることもあり得ます。

例えば:lang(C) という形式の疑似クラスは，言語コードがC である要素にマッチします。

HTML のlang属性のように，構造化言語で言語情報を指定するための属性が定まっている場合には，属性セレクタの|= 演算子を用いる方法でもマッチングすることができます。

この疑似クラスは，制作者が言語の慣習によって表現方法を使い分けたい場合に有効です。

/* 英文では，イタリック体に強調の意味がある */
:lang(en) > em { font: italic 100% serif; }

/* 和文では，斜体は読みにくいので太字で強調 */
 :lang(ja) > em { font: bold 100% sans-serif; }

/* 英文引用の場合，二重引用符・単引用符を用いる */
 :lang(en) > q { quotes: "\22" "\22" "'" "'" }

/* 和文引用の場合，鉤括弧・二重鉤括弧を用いる */
 :lang(ja) > q { quotes: "「" "」" "『" "』" }

  • HTML のlang属性（XML応用ではxml:lang属性）は特殊な汎用属性で，ある要素に設定された言語コード情報は子孫部に継承されます。

    上述の例では子供セレクタを用いているのですが，これは対象となる言語コードにマッチする要素の"子供だけでなく"，別の言語コード情報に上書きされるまでの"子孫部"にもマッチします。

    この点においても，属性セレクタの|= 演算子とは異なるので注意してください。

参考：言語コードとlang属性に関する資料

  • a href="http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/dirlang.html#h-8.1">HTML 4.01仕様書邦訳 文書の言語指定: lang属性
  • a href="http://www5d.biglobe.ne.jp/%7Equia/tech/html/lang.html">lang 属性について @ Technical Notes【QUIA】
  • a href="http://www.kanzaki.com/docs/html/lang.html">言語コードと国コード【ごく簡単なHTMLの説明】
  • a href="http://www.asahi-net.or.jp/%7Ewq6k-yn/lang.html">HTMLの言語情報に関する覚え書き【おすそわけ】

:first-child疑似クラス（:first-child pseudo-class）

:first-child疑似クラスは，ある要素内の最初に出現する子供要素である場合にマッチします。

次例は 'example' というクラス名を持つ要素の子供のうち，最初に出現するp要素にマッチします。

.example > p:first-child { color: red; }

<div class="example">
 <p>'example' というクラス名を持つ要素の 子供のうち，最初に出現するp要素にマッチ。</p>
<p>同じ兄弟でも，2つめ以降のp要素にはマッチしない。 </p>
 <p> … </p> </div>

次に示す両セレクタは同じ意味になります。

* > p:first-child {}
/* p要素は任意要素の先頭にある子供要素 */
 p:first-child {}
/* このように書いても，上述の規則と同義 */