W3G

対応状況について

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

リンクのアクセス状態に応じて適用

a:link    { プロパティ : 値 ; }
a:visited { プロパティ : 値 ; }

a要素がセレクタとなり、アンカー内容のリンクボタンをユーザのアクセス状態に応じて変化させます。セレクタとなる要素に続けてコロン（:）をつけて定義済みキーワードを指定します。"link", "visited"の2つがあります。

:link擬似クラスは未アクセスのリンクを表し、:visited擬似クラスはアクセス済みのリンクを表します。これらの擬似クラスをリンク擬似クラスと呼びます。

なお、アクセス済みのデータが取得できてしまうというセキュリティ上の理由から:visited擬似クラスに指定できるプロパティはUAによっては制限が加えられています（最新のUAではすべて制限されている）。制限されているUAでは:visited擬似クラスに指定しても、効果が反映されるCSS2.1のプロパティは colorプロパティ, background-colorプロパティ, border-colorプロパティ, outline-colorプロパティのみの色指定に限定されており、たとえばborder-imageプロパティを:visited擬似クラスに伴っても無効になります。

要素へのアクションに応じて適用

a:hover    { プロパティ : 値 ; }
a:active { プロパティ : 値 ; }
input:focus { プロパティ : 値 ; }

要素へのアクション状態に応じて変化させます。アクションには"hover", "active", "focus"の3つがあります。

それぞれ:hover擬似クラスは要素にポインタ（カーソル）があわさったときのアクション、:active擬似クラスは要素を選択してアクティブになったときのアクション、:focus擬似クラスは要素にフォーカスしたときのアクションを表します。これらの擬似クラスをダイナミック擬似クラスと呼びます。

なお、対応状況に先に挙げていますが、Internet Explorer 6以前か7以上かのバージョンによってhover擬似クラスとactive擬似クラスはセレクタがa要素であるかどうかにより無効であったり有効であったりするので注意してください。Internet Explorer6以前においては、a要素以外のセレクタに対するhover擬似クラス・active擬似クラスは無効です。

また、:focus擬似クラスはform要素のコントロール部品となる input要素や textarea要素などフォーカス（テキストを入力できる状態）を受け取れる要素にのみ効果があるので、指定できるセレクタは限定的です。Internet Explorer は、Internet Explorer 8から:focus擬似クラスに対応しています。

a:link    { color : #00f ; text-decoration : none ; }
a:visited { color : #369 ; }
a:hover   { color : #f00 ; text-decoration : underline ; }
a:active  { color : #f60 ; }

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

要素: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以前では無効です。