擬似クラスと擬似要素

擬似クラス(Pseudo-classes)は要素が特定の状態にある場合にスタイルを指定するもので、擬似要素(Pseudo-elements)は要素内の特定の文字や行に対してスタイルを指定したり、文字や画像を追加することができます。どちらもセレクタとなる要素名のあとにコロン(:)をつけて記述します。

対応状況について

これから紹介する擬似クラスと擬似要素は、Internet Explorer のバージョンによっては対応がまちまちなので注意してください。

Internete Explorerにおける擬似クラス対応状況
擬似クラスIE6IE7IE8+
:link
:visited
:hover
(a要素のみ対応)
:active
(a要素のみ対応)
:focus××
:first-child×
:lang××
Internete Explorerにおける擬似要素対応状況
擬似要素IE6IE7IE8+
:first-letter
:first-line
:before
:after
××

他の要素の最初の子要素に適用

要素:first-child { プロパティ : 値 ; }

:first-child擬似クラスは、指定の要素が他の要素の最初の子要素である場合にのみ、スタイルを適用することができます。

Internet Explorer 7 より:first-child擬似クラスに対応しています。Internet Explorer 6以前では無効です。

要素の言語コードによって適用

要素:lang(言語コード) { プロパティ : 値 ; }

:lang擬似クラスは、指定の要素がどの言語コードで記述されているかによって、スタイルを適用することができます。

なお、属性セレクタを使うことでも同じ効果を出すことができますが、:lang擬似クラスの場合は下記のような場合でもスタイルを適用できる違いがあります。

p:lang(fr) { color : navy ; } /* :lang擬似クラスでの指定 */
p[lang="fr"] { color : navy ; }  /* 属性セレクタでの指定 */
......
<blockquote lang="fr"><p>Bonjour, Monsieur...</p></blockquote>

上記のような場合、属性セレクタによる指定では、p要素自体に直接 lang="fr" の属性値があるわけではないので、スタイルの適用対象とはなりませんが、:lang擬似クラスを使えば、p要素に直接言語コードが指定されていなくとも、UA が言語コードを判別できればスタイルの適用対象となります。

Internet Explorer 8 より:lang擬似クラスに対応しています。Internet Explorer 7以前では無効です。

要素の1文字目だけに適用

要素:first-letter { プロパティ : 値 ; }

:first-letter擬似要素は、要素内のテキストの最初の1文字目だけにスタイルを適用することができます。

h1:first-letter { font-size : 180% : }
......
<h1>擬似クラス・擬似要素</h1>

h1要素内の最初のテキスト(1文字目)は「擬」であるため、「擬」の部分だけに親要素に指定されているフォントサイズより 1.8倍の指定が適用されます。

要素の1行目だけに適用

要素:first-line { プロパティ : 値 ; }

:first-line擬似要素は、行内ブロックが満たされて最初の折り返しが行われるか、または br要素で強制改行されるまでの1行目だけにスタイルを適用することができます。つまり、最初の1行目の内容がひとつの HTML の要素としてスタイルの適用対象となります。ページ幅が指定されていない状態での折り返しの場合は、表示域のサイズが変更されると、それにあわせてスタイルの適用対象となる1行目のテキスト量も増減します。

h2 { font-size : 120% ; }
h2:first-line { font-size : 150% ; }
......
<h2>悪性脳腫瘍との闘い<br />-奇跡の序章-</h2>

このサンプルでは、「-奇跡の序章-」の部分のテキストは br要素による強制改行が行われているために、h2要素をセレクタとして親要素に指定されたフォントサイズより1.2倍の指定が適用されますが、1行目の「悪性脳腫瘍との闘い」の部分には親要素に指定されたフォントサイズより計1.8倍(120% * 150%)の指定が適用されることになります。

要素の前後に文字や画像を追加

要素:before { content : 値 ; }
要素:after  { content : 値 ; }

:before擬似要素と :after擬似要素 は、contentプロパティとあわせて、指定の要素の前後に仮想的な文字列や画像を追加することができます。

a[href]:before { content : url(arrow.gif) ; }

上記のサンプルでは、リンクボタン(アンカー内容)の前に "arrow.gif" という画像を追加しています。このようにリンク部分に画像などを仮想的にレンダリング(描写)させることで、リンク部分を視覚的に目立たせて、ユーザを誘導する効果的な利用法などが考えられます。詳しい指定方法は、contentプロパティを参照してください。

Internet Explorer 8 より:before擬似要素、:after擬似要素に対応しています。Internet Explorer 7以前では無効です。

Updated / Published