W-0029 ダイナミック疑似クラスを使いこなす

ダイナミック疑似クラスとは、 CSS 2 で定義されている以下の疑似クラスのことです。

:hover

ポインタが要素の上にある状態を示す疑似クラス。

:active

要素がクリックされている（今現在作動している）状態を示す疑似クラス。

:focus

その要素にフォーカスが来ている状態を示す疑似クラス（ IE/NN の場合、 Tab 又は Shift+Tab でフォーカスを移動できる）。

例えば以下のようにすると、クリックしたときにリンク文字列が下に沈むような表示効果が得られます。

a:link, a:visited {
    position: relative;
    top: 0; left: 0;
}
a:link:active, a:visited:active {
    top: 1px; left: 1px;
    /* border: inset gray 1px; これはお好みで */
}

※ a:link, a:visited を無指定にして a:link:active, a:visited:active のところに position: relative; と書くのが理にかなっていますが、 Mozilla の一部のバージョン（0.9.2以前）と Netscape 6.1 PR1は position の値をダイナミック疑似クラスで変化させると強制終了してしまいます。よって、ここでは全ての a 要素の position 値をあらかじめ relative にしておくという方法をとりました。

また、これらのダイナミック疑似クラスはアンカー（リンク文字列）専用ではなく汎用なので、他の要素と組み合わせれば色々な使い方ができます。

 li:hover { list-style-image: url(active.gif); }
  /* ポインタが上にあるリストのマーカーを変える */
option:hover { background: black; color: white; }
  /* ポインタが上にあるドロップダウンリスト項目の色を変える */
textarea:focus, input:focus, select:focus {
    background: #BFBFBF; color: #000000;
}
  /* 入力中のフォーム部品の色を変える */

リンク文字列以外へのダイナミック疑似クラスに対応しているのは今のところ Netscape 6 /Mozilla だけのようですが、 IE もそのうち対応するでしょう。

PageTop