5. 擬似クラスと擬似要素

Since: May/30th/2004

CSS には、要素タイプ名や属性による固定的なセレクタのほかに、擬似クラス (pseudo-classes) と擬似要素 (pseudo-elements) と呼ばれるセレクタが用意されています。

疑似クラス

CSS1 での疑似クラスには アンカー疑似クラスがありました。CSS2では更に first-child 疑似クラス、 lang 疑似クラスが追加されました。

擬似クラスとは、セレクタにマッチする対象が、閲覧者の文書に対する操作に応じてダイナミックに変化するものです。文書の木構造に依存していないセレクタだということができます。

リンクに関する疑似クラス

CSS1 で用意された :link, :visited 疑似クラスは href 属性を持つ a 要素にしかマッチしないので、次の何れも等価です；

a[href]:link { color: maroon }
a:link { color: maroon }
:link { color: maroon }

CSS2 では、 :active は任意の要素に対してマッチできます。

CSS2 では、 :link, :visited は他の疑似クラスと排他的ですが、 :active は他の疑似クラスと共存可能で、 :link であり且つ :active な a 要素が存在可能です。

:focus は、テキスト入力カーソルがアクティブなテキスト・エリアなどにマッチする疑似要素です。

これらの疑似クラスの継承関係に注意して、記述順番を考えなければなりません。

:link    { color: red }    /* 未訪のリンク */
:visited { color: blue }   /* 訪問済みのリンク */
a:hover   { color: yellow } /* カーソルが上に乗っているリンク */
a:active  { color: lime }   /* アクティブ中のリンク */

a:hover が :link, :active よりも前に記述されていると、 a:hover のスタイルは :link, :active のスタイルに上書きされてしまいます。

また、この例では a:hover が a:active よりも前に記述されているので、 ホバー状態でも アクティブ状態のスタイルが適用されます。

:first-child 疑似クラス

或る要素が親要素の中で最初に現れる子供要素である場合にだけマッチします。擬似クラスですが、文書の木構造に依存して決定可能なこともあります。セレクタの中で、任意の場所に記述可能です。

/* div 要素の最初の子要素である p 要素にだけマッチする */
div > p:first-child { color:maroon }

div 要素の最初の子要素が p 要素である場合、その p 要素にだけマッチします。div 要素の子供要素であっても、p 要素の前に h1 要素が先行する場合は、その p 要素にはマッチしません。

次の例では、二つ目の p 要素が div 要素の最初に現れる子供要素になっているので、二つ目の p 要素にだけマッチします；

<div class="chapter">
  <h1>Level 1 Headings.</h1>
  <p>section start;</p>
  <div class="section">
    <p>paragraph contents.</p>
    <p>second paragraph contents.</p>
  </div>
</div>

:first-child は指定された要素の親要素を自動的に想定しますので、次の二つのセレクタは等価です；

* > p:first-child
p:first-child

:lang 疑似クラス

lang 属性を疑似クラスとしてセレクタに用いる事が出来ます。

:lang(ja) { line-height: 1.5 }
p:lang(en) { font-style: italic }

一つ目のスタイルは lang="ja" （日本語）であるあらゆる要素に対してマッチします。二つ目のスタイルは lang="en" である p 要素にだけマッチします。

属性セレクタを用いたものと等価です；

p:lang(ja) { line-height: 1.5 }
p[lang="ja"] { line-height: 1.5 }

疑似要素

CSS2 では、擬似要素として、first-letter、first-line、before、after 擬似要素を定義しています。

擬似要素とは、要素タイプや属性には依存しませんが、文書の木構造に対してデディケイトに決定するセレクタです。文書を記述する仕様に依存しないけれども、木構造上他と識別可能な対象にアクセスする方法を提供するための仕組みです。

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

CSS1 では :first-line, :first-letter 疑似要素が用意されていました。

指定可能なプロパティが制限を受けます；

first-line

font properties、color properties、background properties、'word-spacing'、'letter-spacing'、'text-decoration'、'vertical-align'、'text-transform'、'line-height'、'text-shadow'、'clear'

first-letter

font properties、color properties、background properties、margin, padding, border, 'text-decoration'、'vertical-align'、'text-transform'、'line-height'、'text-shadow'、'float'、'clear'

:first-letter 疑似要素の場合、一文字目に引用符などの区切り文字が来た場合は、二文字目も含むものと規定されています。

/* 文字のサイズを 12pt, 行高を 12pt*1=12pt に */
p { font-size: 12pt; line-height: 1 }

/* 一文字目を左端にフロートしてサイズを二倍に */
p:first-letter { float: left; font-size: 200% }

/* 一行目を太字に */
p:first-line { font-weight: bold }

<p>
THE TRAGEDY OF MACBETH; 1606; William Shakespeare.
</p>
<p>
"Anon!
Fair is foul, and foul is fair.
Hover through the fog and filthy air."
</p>

【表示概念図】

___
 | HE TRAGEDY OF MACBETH;
 | 1606; William Shakespeare.
 "/| non! Fairis foul,
 /-| and foul is fair.
 Hover through the fog
 and filthty air."

【表示例】

:before, :after 疑似要素

要素の直前、直後に、生成内容を挿入することができます。

プロパティ 'display' の指定可能な値に制約を受けます。

ブロックレベル要素

:before, :after の 'display' に指定可能な値は、'none', 'inline', 'block', 'marker'。その他の値は、'block' と等価。

インラインレベル要素

:before, :after の 'display' に指定可能な値は、'none', 'inline'。 その他の値は、 'inline' と等価。

擬似要素 :before の例：

/* class 属性が note である p 要素の直前に
   Note: と云う文字列を挿入します */
p.note:before { content: "Note: " }