[5] [DFN[[CODE(CSS)@en[[[::first-line]]]]]] [[擬似要素]]は、[[要素]]の最初の[RUBYB[書式付けされた[[行]]]@en[formatted line]]を表します
[SRC[>>6]]。

* 仕様書

[REFS[
- [6] [CITE@en[Selectors Level 3]] ([TIME[2011-09-29 22:16:17 +09:00]] 版) <http://www.w3.org/TR/selectors/#first-line>
]REFS]

* 擬似要素の範囲と架空的タグ列

[7] 仕様書では [CODE(CSS)@en[[[::first-line]]]] [[擬似要素]]のはたらきは[DFN[[RUBYB[[[架空タグ列]]]@en[fictional tag sequence]]]]によって説明されています。
[[架空タグ列]]は元々の[[文書]]に存在していない[[タグ]]を書き足すことによって[[擬似要素]]が生成される範囲を説明したものです。

[EG[
[8] [[CSS]] で
[PRE(CSS example code)[
p::first-line { text-transform: uppercase }
]PRE]
... のように最初の行を大文字にするように指定してあったとすると、 [[HTML]]
[PRE(HTML example code)[
<P>This is a somewhat long HTML 
paragraph that will be broken into several 
lines.</P>
]PRE]
... の[[架空タグ列]]は、
[PRE(HTML example code)[
<P><P::first-line> This is a somewhat long HTML 
paragraph that </P::first-line> will be broken into several
lines.</P>
]PRE]
... となります。これは例えば
[PRE(example)[
THIS IS A SOMEWHAT LONG HTML PARAGRAPH THAT
will be broken into several lines. 
]PRE]
... のようにレンダリングされます。 [SRC[>>2]]
]EG]

[9] [[擬似要素]]に含まれる (架空のタグに囲まれる) 範囲は、文字の大きさや利用可能な幅など様々な要因によって、
どこまでが1行目に収まるかによって変わります。したがって[[文書]]として予め1行目の範囲を確定しておくことは困難なので、
[[要素]]ではなく[[擬似要素]]として表すのですね。

[10] [[継承]]は本当の[[要素]]からその[[子]]である[[擬似要素]]へと行われます。

[EG[
[11] >>8 の例では、[[架空タグ列]]から想定される架空の[[文書木]]から想起される通り、
[CODE(CSS)[[[P]]]] [[要素]]から [CODE(CSS)[P::first-child]] [[擬似要素]]へと継承されます。
]EG]

* レンダリング

[1]
[CODE(CSS)[:first-line]] [[疑似要素]]が[[文書木]]上の[[子要素]]を分断させる場合。

仕様書:
<http://www.w3.org/TR/CSS21/selector.html#x48>

例その1
<data:text/html;charset=us-ascii,%0A%3Chtml%3E%0A%3Ctitle%20lang=%22en%22%3E:first-line%20Breaking%20Child%20Element%3C/title%3E%0A%3Cstyle%20type=%22text/css%22%3E%0Abody%20%7B%0A%20%20width:%2040em;%0A%7D%0Ap:first-line%20%7B%0A%20%20color:%20red;%0A%20%20text-decoration:%20underline;%0A%7D%0Aspan%20%7B%0A%20%20background-color:%20yellow;%0A%7D%0A%3C/style%3E%0A%0A%3Cp%20lang=%22und%22%3EAaaaaa%20aaaaaaaaa%20aa%20aaaaaaaaa%20aa%20a%20aaaa%20%3Cspan%3Ebbbb%20bbbbbbbb%0Ab%20%20%20bbbbbbbbbbbbbbbbbbb%20bbb%20bbb%20bbbbbbbb%20bbb%20bbbbbbbbbbbbb%20b%0Abbbbbbbbbbbbbbb%20bbbbbbb%3C/span%3Eccc%20ccccc%20ccccccccccc%0Accccccccccc%0Accc%20ccccccccccccccccccc%20cccccccccc%3C/p%3E%0A>

例その2
<data:text/html;charset=us-ascii,%0A%3Chtml%3E%0A%3Ctitle%20lang=%22en%22%3E:first-line%20Breaking%20Child%20Element%3C/title%3E%0A%3Cstyle%20type=%22text/css%22%3E%0Abody%20%7B%0A%20%20width:%2050em;%0A%7D%0Ap:first-line%20%7B%0A%20%20color:%20red;%0A%20%20text-decoration:%20underline;%0A%7D%0Aspan%20%7B%0A%20%20background-color:%20yellow;%0A%7D%0A%3C/style%3E%0A%0A%3Cp%20lang=%22und%22%3EAaaaaa%20aaaaaaaaa%20aa%20aaaaaaaaa%20aa%20a%20aaaa%20%3Cspan%3Ebbbb%20bbbbbbbb%0Abbbbbbbbbbbbbbb%20bbbbbbb%3C/span%3Eccc%20ccccc%20ccccccccccc%0Accccccccccc%0Accc%20ccccccccccccccccccc%20cccccccccc%3C/p%3E%0A>

([[名無しさん]])

[2]
>>1 の例その1は分断させる場合で、例その2は比較用の分断させずに完全に一部である場合。

[[Gecko]] ([[Firefox]] 1.0.4) の場合:
どちらも、子要素が疑似要素の子供であるかのようなレンダリング結果。

[[Konqueror]] 3.4.0 の場合:
例その1 (分断させる場合) は疑似要素が子要素の直前で終了するかのようなレンダリング結果。例その2 (含まれる場合) は疑似要素の子要素兄部分、子要素、疑似要素の子要素弟部分の3つの要素が存在して表示上の最初の行に横並びになっているかのようなレンダリング。
([[名無しさん]])

[3]
[[Gecko]] ([[Firefox]] 1.5) の場合: >>2 の[[Konqueror]]と同じ。
([[名無しさん]])


[4]
[[Opera]] 8.5 の場合: >>3 と同じ。ただし、[[下線]]は表示されない。
([[名無しさん]])