目次を飛ばして本文へ パン屑リストへ
目次
:first-line
:first-letter
:before と :after
疑似要素の競合

疑似要素

概要疑似要素は、要素と似た参照をします。要素では参照出来なかったり、参照しようとすると多少無理が出てしまうものを、これら擬似要素を使って参照します。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'は該当要素直下にあるものと考えます。詳細は、疑似要素の競合をご覧ください。

注意点
  1. この疑似要素は一部をサポートするのみでも、全くサポートしなくても良い事になっています。
CSS1とCSS2の相違点
  1. 拡張に伴い、'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'は入れ子になっている要素の最も内側にあるものと考えます。詳細は、疑似要素の競合をご覧ください。

注意点
  1. この疑似要素は一部をサポートするのみでも、全くサポートしなくても良い事になっています。
問題点
  1. CSSの規則に従えば、ドロップキャップすると文字は消えるか、又はほかの文字の下敷きになってしまいます。
CSS1とCSS2の相違点
  1. 拡張に伴い、'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>...

尚、最初に出現するのがフロートボックスであったり、絶対配置のボックスである場合は、それらを無視して考えます。(正誤表に追記がありました)


page top
最終更新日:2018年07月18日
Copyright © 2002-2018 ばあど All Rights Reserved.