Section 13 : 疑似クラスと疑似要素

 今まで見てきた CSS では,どうしても実現できない効果がある。そういった効果が現れる状態をうまくクラス化,要素化して実現するのが疑似クラス,疑似要素である。

アンカ疑似クラス

 ジャンプが施されている部分は色が変わったり,下線が引かれたりするのは WWW ブラウザではおなじみである。しかも,それが示すページを訪れたか,訪れなかったかで色が変わったりするのもしばしばである。これは,いままでの CSS では実現できない。そこで,アンカ疑似クラスを導入する。

 アンカ疑似クラスは半角コロンで区切って表される。

:link
:visited
:active

の 3 つである。これは STYLE 属性に書き込むことはしない。アンカ疑似クラスはふつうのクラスと同じように使うのであるが,HTML ではアンカを表すのは <A> のみであるので,

A:link

のような使われ方をする。

 link 疑似クラスはまだ訪れていないリンク,visited 疑似クラスはすでに訪れたリンク,active 疑似クラスは現在活動中の(マウスボタンが押された)リンクを表す。

 たとえば次のように使う。

A:link { color: blue; }
A:visited { color: purple; }
A:active { color: red }

これで,まだ訪れていないリンクは青,活動中のリンクは赤,すでに訪れたリンクは紫になる。

 上の例では色しか指定しなかったが,もちろんほかの属性も指定してよい。

A { color: black; text-decoration: none; }
A:link { background: #FF9; }
A:visited { text-decoration: line-through; background: #CCC; }
A:active { background: #F96; }

とすることもできる。ただ,スタイルの適用に伴ってブラウザが大規模に画面の書き換えを行わなければならない場合,指定が無視されることもある。

 アンカ疑似クラスは通常のクラスと同時に使ってもよいし,通常のクラスと同じように入れ子による絞り込みの対象にもなる。

A.external:link { color: green; }

A:link IMG { border: inset red; }
A:visited IMG { border: solid green; }
A:active IMG { border: outset blue; }

 上の例はクラス external のアンカに対して文字色を緑色にしている。通常のクラスと擬似クラスを同時に使う場合,“.(クラス):(疑似クラス)”の順でなくてはならない。

 また下の例では,ジャンプが施されている画像の枠が状態によって変わるような設定になっている(これも,ダイナミックな変化の保証はない)。

 リンク擬似クラスの指定は,CSS2 との互換性のため,3 つの擬似クラスを,“:link,:vlink,:active”または,“:vlink,:link,:active”の順で指定するのがよい。

植字疑似要素

 欧文の文書で,文章の最初の文字がやたら大きかったり(ドロップキャップ),最初の 1 行がすべて大文字だったりというのを見かける。最初の文字は <SPAN> を使えばどうにかなりそうな気もするが,最初の 1 行というのはブラウザの幅が変わるからどうにもならない。そこで,ブロック要素の“最初の 1 文字”“最初の 1 行”を疑似要素として植字で使われる効果を再現する。

:first-letter
:first-line

 ブラウザで表示させたとき,ブロック要素の最初の 1 文字は“first-letter 疑似要素”に,最初の 1 行は“first-line 疑似要素”に属すことになる。

 この 2 つの疑似要素に指定できる属性は限られている。

first-letter 疑似クラス
font に関する属性,color,background に関する属性,text-decoration,text-transform,line-height,margin に関する属性,border に関する属性,padding に関する属性,と後述する vertical-align,float,clear。ただし,vertical-align と float は排他。
first-line 疑似クラス
font に関する属性,color,background に関する属性,word-spacing,letter-spacing,text-decoration,text-transform,line-height,と後述する vertical-align,clear。

 たとえば次の命令を与える。

P:first-letter { font-size: 150%; color: blue; }
P:first-line { text-transform: uppercase; }

CSS 1 has two typographical pseudo-elements. We can use some typographical effects with them.

One of them is "first-letter pseudo-elements," which applies to the first letter of a block-level element. The other is "first-line pseudo-elements," which applies to the first line of a block-level element when formatted on the canvas.

 疑似要素は疑似クラスと同じようにクラスに続けて使うことができる。

P.headline:first-letter { font-size: 200%; }

 ただし,入れ子による絞り込みの対象にはならない。

P:first-line EM

このような使い方をしてはならない。

 first-letter 疑似要素は,原則的に“最初の 1 文字”だが,最初の 1 文字が文字でない場合(たとえば,引用符の場合)などは 2 文字めまで first-letter 疑似要素に属することもある。どのキャラクタが first-letter 疑似要素の長さを変えるかは文書中の言語による。

 IE3/4/5, NN4  植字疑似要素はサポートされていない。