疑似要素
疑似要素は、要素と似た参照をします。要素では参照出来なかったり、参照しようとすると多少無理が出てしまうものを、これら擬似要素を使って参照します。HTML/XML文書もこれらを使用する事で、ソースの見た目がスッキリします。
疑似要素は、その性質上、セレクタ内の主体、つまり最後の単純セレクタにしか付ける事が出来ません。何故かは、実際に見てみれば自ずと分かるでしょう。
大文字・小文字の区別はありません。
:first-line
| N7.0 Win |
N6.0 Win |
e6.0 Win |
e5.5 Win |
e5.0 Win |
e5.0 Mac |
e4.5 Mac |
O7.0 Win |
O6.0 Win |
|---|---|---|---|---|---|---|---|---|
| △ | ○ | ○ | ○ | × | ○ | × | △ | ○ |
| 適用 | ブロック要素 |
|---|---|
| レベル | - |
該当する要素の一行目を参照します。ただし、フロートや絶対配置は無視します。
一行の文字数は、UAの幅によって変化します。ですので、構造化言語では明示出来ません。
例えば、こんな具合です。
p:first-line { font-size: 1.1em }
この場合、p要素 の一行目だけ、ちょっとだけ文字が大きくなります(110%)。二行目以降は、元の大きさに戻ります。
この疑似要素に適用出来る宣言は限定されていて、フォント関連プロパティ、'color'、背景関連プロパティ、'word-spacing'、'letter-spacing'、'text-decoration'、'vertical-align'、'text-transform'、'line-height'、'text-shadow'、'clear' 以外は指定してはいけない事になっています。
マージンプロパティ、パディングプロパティ、ボーダープロパティ、'cursor'が使えても良さそうな気もします。
この疑似要素はブロック要素にしか使えません。それから、':first-line'は該当要素直下にあるものと考えます。詳細は、疑似要素の競合をご覧ください。
- 注意点
-
- この疑似要素は一部をサポートするのみでも、全くサポートしなくても良い事になっています。
- CSS1とCSS2の相違点
-
- 拡張に伴い、'text-shadow'プロパティも使用可能になりました。
:first-letter
| N7.0 Win |
N6.0 Win |
e6.0 Win |
e5.5 Win |
e5.0 Win |
e5.0 Mac |
e4.5 Mac |
O7.0 Win |
O6.0 Win |
|---|---|---|---|---|---|---|---|---|
| △ | ○ | ○ | ○ | × | △ | × | ○ | ○ |
| 適用 | ブロック要素 |
|---|---|
| レベル | - |
一番初めの文字を参照する為の疑似要素です。これは、表やその他の要素を用いて設定する事も可能ですが、そうするとやはり無理が出ます。例えばこのように設定すると、
<html>
<head>
<title>ドロップキャップ効果の例</title>
<style type="text/css">
p { font-size: 12pt; line-height: 12pt }
p:first-letter { font-size: 200%; font-style: italic; float: left }
span { font-weight: bold }
</style>
</head>
<body>
<p><span>多足歩行の動物のほうが速い</span>と結論付けられる。
例を考えてみよう。2足歩行の我々人間よりも4足歩行の馬のほうが人間よりも速い。</p>
</body>
</html>
このようになります。
注目すべきは、最初の文字が数行に渡って表示されている点です。こういった視覚効果はよく使われ、ドロップキャップと呼ばれています。
この要素も、適用可能なプロパティが制限されています。フォント関連プロパティ、'color'、背景関連プロパティ、'text-decoration'、'vertical-align'、'text-transform'、'line-height'、'text-shadow'、マージンプロパティ、パディングプロパティ、ボーダープロパティ、'float'、'clear' 以外は使えません。
'cursor'が使えても良さそうな気もします。
'vertical-align'ですが、現段階でのサポート状況では、使用しないほうが良いかもしれません。
鉤括弧(「)や引用符("や')等、UNICODEでパンクチュエーションとして分類されている文字は無視します。
':first-letter'は':first-line'と違って、すべての要素に適用可能です。それから、':first-letter'は入れ子になっている要素の最も内側にあるものと考えます。詳細は、疑似要素の競合をご覧ください。
- 注意点
-
- この疑似要素は一部をサポートするのみでも、全くサポートしなくても良い事になっています。
- 問題点
-
- CSSの規則に従えば、ドロップキャップすると文字は消えるか、又はほかの文字の下敷きになってしまいます。
- CSS1とCSS2の相違点
-
- 拡張に伴い、'text-shadow'プロパティも使用可能になりました。
:before と :after
| N7.0 Win |
N6.0 Win |
e6.0 Win |
e5.5 Win |
e5.0 Win |
e5.0 Mac |
e4.5 Mac |
O7.0 Win |
O6.0 Win |
|---|---|---|---|---|---|---|---|---|
| ○ | ○ | × | × | × | × | × | △ | △ |
| レベル | 2- |
|---|
この疑似要素は、当該要素の前後に、何かを挿入する時に使います。例えば、見出しに番号を振ったり、引用部分は引用符で括ったりする時に使います。
例えば、
p.special:before {content: "Special! "}
上の例では、class属性値 にspecialを含む p要素 の手前に、必ず"Special! "と挿入します。
<p>おぉ、いぇぇ〜〜</p>
Special! おぉ、いぇぇ〜〜
もう一つ例を挙げますと、
q:lang(fr) { quotes: '«' '»' }
q:before { content: open-quote }
q:after { content: close-quote }
とすると、言語関連属性にfrで始まる属性値を含む q要素 の前に'«'を、後ろに'»'を挿入します。
<q lang="fr">This is クォーテド・ふらんせ語.</q>
«This is クォーテド・ふらんせ語.»
尚、元の要素とこれら疑似要素の組み合わせは、以下のようになります。
| 元の要素の'display'の値 | :before と :afterの'display'の値 |
|---|---|
| none, list-item | ??? |
| block | block, inline, marker, none |
| inline | inline, none |
疑似要素の競合
':first-line'、':first-letter'、':before'は競合し得ます。
先ず':first-line'と':first-letter'についてですが、':first-line'は該当要素直下に、':first-letter'は入れ子になっている要素の最も内側にあるものと考えます。
例を挙げると、以下のようなHTML文書があったとします。指定した要素の1文字目や1行目にほかの要素が割って入った場合も同時に考えます。
<p>
<span>
このテキストはとても長く、1行では
表示し切れましぇん。
</span>
</p>
この要素のうち p要素 に':first-letter'、':first-line'両方を適用したとしましょう。1行目が「1行では」の次で終わると仮定して、タグを使って表現するとこうなります。
<p>
<p:first-line>
<span>
<p:first-letter>
こ
</p:first-letter>
のテキストはとても長く、1行では
</span>
</p:first-line>
<span>
表示し切れましぇん。
</span>
</p>
わざわざspan要素を分割している点に注目してください。
p:first-letter仮想要素 が p:first-line仮想要素、span要素 も含め、最も内側に入れ子になっているのが分かりますでしょうか。
逆に、p:first-line仮想要素 は p:first-letter仮想要素、span要素 も含め、最も外側になっています。
次は':first-line'、':first-letter'と':before'の関係についてです。':first-line'、':first-letter'は':before'の内容も含めて考えます。つまり、
p.special:before {content: "Special! "}
p.special:first-letter {color: #ffd800}
とすると、class属性値 がspecialの p要素 の手前に書かれた"Special! "の"S"の字が、金色で表示されます。
p.special:before {content: "Special! "}
p.special:first-line {color: #ffd800}
とすると、今度は"Special! "も含めた一行目が金色で表示されます。
仮想要素の元要素が入れ子になっている場合は、仮想要素も入れ子にして考えます。
<B><A><B:first-line><A:first-line>ここは1行目です</A:first-line></B:first-line>...
尚、最初に出現するのがフロートボックスであったり、絶対配置のボックスである場合は、それらを無視して考えます。(正誤表に追記がありました)