16.4.6 セレクタ(3) 擬似クラスと擬似要素

今まで説明してきたセレクタでは指定しづらい，あるいは指定できないものに対してスタイルを指定するため，CSSでは擬似クラス・擬似要素というものが用意されています．

リンク擬似クラス

ほとんどのウェブブラウザにおいてハイパーリンクは下線付きの青い文字で表現され，リンク先を訪れると色が変化します．この「訪れる前のリンク」「訪れた後のリンク」を表すのが :link , :visited です．:link，:visitedをクラスのように扱ってスタイルを指定すると，訪れる前および訪れた後のリンクに対してスタイルの指定ができます．たとえば

a:link{ color:red; }
a:visited{ color:green; }

とすると，訪れる前のリンクが赤色で，訪れた後のリンクが緑色で表示されるようになります．

リンク擬似クラスを使うときは，ウェブページを見る人を混乱させないように注意してください．たとえば

a:link a:visited{ color:black; }

などとやってしまうと

はいぱーワークブック

のように，リンクの貼られた文字とそれ以外の文字の区別が付かなくなってしまいます．リンクに関するスタイルがデファクト・スタンダードとして統一されている以上，下手にスタイルをいじらないほうが良いでしょう．

ダイナミック擬似クラス

「現在選択中の要素」「マウスが上にある要素」「フォーカスのある要素」を，それぞれ :active , :hover , :focus という擬似クラスで表します．フォーカスのある要素というのは，入力状態にあるテキストボックスなどのことです．これらを用いると，少しですが動的な表現ができるようになります．たとえば

h1:hover { color:red }

とすると，h1要素の上にマウスが来たときに文字が赤く変化します．

:first-line,:first-letter擬似要素

要素名の後ろに:first-line,:first-letterを続けて書くと，それぞれ要素の1行目，1文字目のスタイルを変えることができます．例えば英語では，よく次のような表現が使われます．

例:

p:first-letter{ font-family:serif; font-size:2em; }
<p>This is a pen.</p>

This is a pen.

なお次ページでフォントの説明がありますが， font-size プロパティ指定の際には，emは親要素のフォントサイズを意味します．