Cascading Style Sheets解説

疑似クラスと疑似要素

例えば「訪問済みのリンク」の色を変えたいとします。しかし、そういった「訪問済み」か「未訪問」かという情報はHTML文書では表現し得ないものです。そういったものに対してスタイルを指定したい時に利用されるのが「疑似クラス」や「疑似要素」です。どちらも要素名と疑似クラス（要素）名を「:（コロン）」でつないで記述します。

擬似クラス(Pseudo-classes)

リンク疑似クラス(The link pseudo-classes)

リンクに関する疑似クラスです。CSS1では以下の3つが用意されています。a要素にのみ適用できます。

a:link{color:blue}
a:visited{color:silver}
a:active{color:red}

ダイナミック疑似クラス(The dynamic pseudo-classes) -CSS2-

CSS2では、リンク疑似クラスを「:link」と「:visited」の2つとし、新たにダイナミック疑似クラスとして「:hover」、「:active」、「:focus」の3つが加えられました。リンク疑似クラスはアンカーのみに適用されますが、ダイナミック疑似クラスは全要素に適用されます。

a:hover{color: blue;
        text-decoration: underline}

補足

擬似クラスは文脈セレクタと組み合わせて使用することができます。

em a:link{color: green}

また、通常のクラスと組み合わせることもできます。この時、通常のクラスを先に、擬似クラスを後に書かなければなりません。

a.external:visited{color: silver}

<a class="external" href="http://foo.hoge/">お勧めリンク</a>

上の例のようなリンクをあなたが既に閲覧済みであれば、このリンクは薄い灰色で表示されることになります。

擬似要素(Pseudo-elements)

first-line擬似要素(The 'first-line' pseudo-element)

その名の通り、最初の一行だけに指定したスタイルが適用されます。疑似クラス名は「:first-line」です。ブロック要素にのみ用いることができます。

p:first-line{background-color: silver}

first-line擬似要素には、以下に挙げるプロパティのみ使用できます。
「フォント関連」、「色と背景関連」、「word-spacing」、「letter-spacing」、「text-decoration」、「vertical-align」、「text-transform」、「line-height」、「clear」

first-letter擬似要素(The 'first-letter' pseudo-element)

その名の通り、最初の一文字だけに指定したスタイルが適用されます。疑似クラス名は「:first-letter」です。ブロック要素にのみ用いることができます。

h1:first-letter{font-size: x-large}

first-letter擬似要素に適用可能なプロパティは以下の通りです。
「フォント関連」、「色と背景関連」、「text-decoration」、「vertical-align」（「float」の値が「none」である場合のみ）、「text-transform」、「line-height」、マージン関連（単体指定、一括指定）、パディング関連（単体指定、一括指定）、ボーダー関連（「border-width」、「border-color」、「border-style」、「border」、各部単体指定、幅の単体指定）、「float」、「clear」

「float」の値が「none」であればインライン要素扱い、それ以外の場合は浮動要素扱いとなります。

補足

文脈セレクタ内では、セレクタの末尾にのみ擬似要素を取り付けることができます。

body p:first-letter{font-size: x-large}

また、擬似要素はクラスセレクタと組み合わせることができます。擬似要素を通常のクラスや擬似クラスと組み合わせて使用する場合は、擬似要素をセレクタの末尾に付けなければなりません。

p.sub:first-letter{color: red}

<p class="sub">補足説明部</p>

さらに、1つのセレクタに対しては1つの擬似要素のみが指定できます（1つのセレクタに対して2つ以上の擬似要素を指定するのは不正）。ただし、

p{color: blue; font-size: small}
p:first-line{color: red}
p:first-letter{color: green; font-size: 200%}

のように擬似要素を組み合わせて適用することには全く問題ありません。この時、「first-letter」が「first-line」より後に適用されます。ですから、

p:first-letter{color: red}
p:first-line{color: blue}

となっていた場合でも、最初の一文字は「赤」になります。

Back(b)