実践XHTML+CSSでつくるホームページ講座

擬似クラス

代表的な擬似クラス

CSSにおける擬似クラスをご紹介しましょう。
一口に「擬似クラス」といっても、CSSにはさまざまな擬似クラスが存在します。
First-child擬似クラス、リンク擬似クラス、ダイナミック擬似クラス、言語擬似クラス、擬似要素などです。
初心者がこのすべての擬似クラスを使いこなすのはたいていの場合無理です。
ですので今回は、擬似クラスといえばこれ、という、リンクに関する擬似クラスについてご説明いたします。

リンクの擬似クラス

では、4つの擬似クラスを見ていきましょう。

まずa:link、これはリンクが張ってあるテキストなどのカラーやデコレーションを指定する擬似クラスです。

次はa:visited、これはすでに訪問したリンクのカラーやデコレーションをしていします。

次はa:hover、これはマウスカーソルがリンクを指定したテキストなどに乗った時のカラーやデコレーションを指定します。

最後がa:active、これはリンクが張られたテキストなどがクリックされたりしたときのカラーやデコレーションを指定します。

この4つの擬似クラスで、ロールオーバーのような効果を作り出すことができます。
大切なのは、今紹介した4つの擬似クラスの順番です。
この通りに指定しないと、CSSがうまく動いてくれません。
なぜならCSSは上から順番に読み込まれます。a:linkがa:visitedの後ろにあったら、上書きされてa:visitedの指定が変わってしまいます。気を付けてください。