SITEMAP [初めてのホームページ講座] [CSS] [CSS1] [疑似クラス・疑似要素]

CSS1 Reference

疑似クラス・疑似要素

「疑似(Pseudo)」とは、HTML自体にその概念が無く、CSSを実現するために仮想的に要素を定義した方が直感的であったことに由来します。


1. アンカー疑似クラス

通常、視覚系のブラウザではアンカーは異なる色で表示されます。ここにスタイルを適用しても色は変わらないものです。

またアンカーは次の状態に分類でき、それぞれにスタイル指定が可能です。

A:link    { color : blue; }     /*未訪問のアンカー*/
A:visited { color : red; }      /*訪問済みのアンカー*/
A:active  { color : green; }    /*選択中のアンカー*/
A:hover   { color : yellow; }   /*マウスが通過しているアンカー(CSS2)*/

ただし、フォントサイズや行間などをそれぞれで変更していても、ブラウザは状態の変化に対して、動的に変化させる必要はなく、 詳細なスタイル指定を行っても無駄に終わることが多いようです。これらの詳細は勧告されておらず、ブラウザ側に一任されています。

A要素Class属性にlinkを指定しても、これはCSSに対しては意味を為しません。 従って、セレクタの要素名の省略をしても問題ありません。(linkと書けばアンカー疑似クラスとされる) 当然、A要素以外には適用されません。

A:link { color : blue; }   /*未訪問のアンカー*/
 :link { color : blue; }   /*未訪問のアンカー:要素名省略*/

この他にも、「クラスセレクタ」「文脈セレクタ」と組合せも可能です。これらの組合せでスタイルの詳細を指定できます。

A.special:link { color : blue; }    /*Class属性値specialのA要素の未訪問アンカー*/
A:link EM      { color : blue; }    /*A要素内のEM要素の未訪問アンカー*/
A:link
未訪問アンカー
A:visited
訪問済みアンカー
A:active
選択中のアンカー
A:hover
マウスが通過しているアンカー(CSS2)

※「:active」「:hover」は、CSS2ではダイナミック疑似クラスに含まれ、一部仕様が追加されています。

[Go To Top]

2. first-line疑似要素

ブラウザに表示した際の1行目のスタイルを指定します。ただし、適用できるプロパティは限られているので注意が必要です。

P {            font-size : 16pt; }    /*通常のP要素のフォントサイズは16pt*/
P:first-line { font-size : 120%; }    /*P要素の1行目のフォントサイズは16ptに対して1.2倍の18pt*/

first-line疑似要素はブロック要素のみに適用可能です。

この他にも、「クラスセレクタ」「文脈セレクタ」と組合せも可能です。これらの組合せでスタイルの詳細を指定できます。

P.special:first-line { color : blue; }    /*Class属性値specialのP要素の1行目のみフォントカラー青*/
P:first-line EM      { color : blue; }    /*P要素内のEM要素の1行目のみフォントカラー青*/
[Go To Top]

3. first-letter疑似要素

1文字目のスタイルを指定します。ただし、適用できるプロパティは限られているので注意が必要です。

どこまでを1文字と見なすか、記号類や各種言語の対応などはブラウザに一任されています。 日本語においても、ひらがな・カタカナ・漢字・アルファベットやギリシャ文字など多数の文字が存在し、その扱いは非常に難しいものでしょう。

P{              font-size : 16pt; }    /*通常のP要素のフォントサイズは16pt*/
P:first-letter{ font-size : 200%; }    /*P要素の1文字目のフォントサイズは16ptに対して2倍の32pt*/

floatプロパティの値が「none」の時はインライン要素扱い、それ以外は浮動要素扱いとなります。 また、first-letter疑似要素はブロックレベル要素のみに適用可能です。

この他にも、「クラスセレクタ」「文脈セレクタ」と組合せも可能です。これらの組合せでスタイルの詳細を指定できます。

P.special:first-letter { color : blue; }    /*Class属性値specialのP要素の1文字目のみフォントカラー青*/
P:first-letter EM {      color : blue; }    /*P要素内のEM要素の1文字目のみフォントカラー青*/
[Go To Top]

4. 疑似要素の複合

first-line疑似要素first-letter疑似要素は複合して指定することが可能です。

P{               color     : black;    /*P要素のフォントカラーは黒*/
                 font-size : 12pt; }   /*P要素のフォントサイズは12pt*/
P:first-line {   color     : blue;	    /*P要素の1行目のみフォントカラー青*/
                 font-size : 120%; }   /*P要素の1行目のみフォントサイズ14pt*/
P:first-letter { font-size : 200%; }   /*P要素の1文字目のみフォントサイズ24pt*/

上の例では、P要素はフォントを黒、12ptとしておいて、その後で1行目と1文字目を再度指定しています。 このとき、1文字目にはフォントカラーは指定していませんが、継承によってフォントカラーは青になります。 これは、1行目のフォントカラーが適用されるためです。

[Go To Top]

Copyright(C)1999 Miyazaki , All Rights Reserved.