[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]

* レンダリング

[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 と同じ。ただし、[[下線]]は表示されない。
([[名無しさん]])