Edit

Page

Page title:

Page body:

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

* 適用対象

[16] [[CSS]] では[RUBYB[[[ブロック的包含子]]]@en[block-like container]]
([[ブロック箱]]、[[inline-block]]、[[table-caption]]、[[table-cell]]など) に付加された時だけ効果を持ちます。 [SRC[>>6]]

;; [17] わざわざ [[CSS]] ではという注意書きがあるのは [[CSS]] における[[レンダリング]]の概念に依存した説明だからなのでしょうが、ということは
[[CSS]] 以外で適用可能な時はこれと違う対象に効果があるということもあり得るのでしょうね。。。

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

[7] 仕様書は [CODE(CSS)@en[[[::first-line]]]] [[擬似要素]]のはたらきを[[架空タグ列]]によって説明しています。

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

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

;; [12] [[HTML]] のソースコード上の[[改行]]の位置は ([CODE(CSS)@en['[[white-space]]: [[pre]]']] などでもなければ)
関係ありません。

[37] [CODE(CSS)@en[[[::before]]]] や [CODE(CSS)@en[[[::after]]]] による[[生成内容]]も[[最初の書式付き行]]に含まれることがあります。
[SRC[>>6]]

[13] [[擬似要素]]は[[子要素]]を分断させる効果をもたらすこともあります [SRC[>>6]]。

[EG[
[14] 例えば元の [[HTML]] が 
[PRE(HTML example code)[
<P><SPAN class="test"> This is a somewhat long HTML
paragraph that will be broken into several
lines.</SPAN> ...</P>
]PRE]
... であったとしましょう。その[[架空タグ列]]は、
[PRE(HTML example code)[
<P><P::first-line><SPAN class="test"> This is a
somewhat long HTML
paragraph that will </SPAN></P::first-line><SPAN class="test"> be
broken into several
lines.</SPAN> ...</P>
]PRE]
... のように [CODE(HTMLe)@en[SPAN]] [[要素]]を [CODE(CSS)@en[P:first-child]]
[[擬似要素]]がいったん閉じて再度開かせる形となっています。 [SRC[>>6]]
[[レンダリング]]上の[[行]]は[[子要素]]の境界とは無関係に決まるため、 [CODE(HTMLe)@en[SPAN]]
[[要素]]が[[行]]をまたがることがあり、従って [CODE(CSS)@en[::first-line]] [[擬似要素]]とは互い違いになってしまうのですが、
[[CSS]] の[[レンダリング]]は木構造を前提に規定されているので、このように調整するわけです。
]EG]

[28] [[利用者エージェント]]は架空の開始タグは最も内側の[[ブロック水準要素]]のすぐ内側にあるものとして扱う[['''べきです''']]。
ただし [[CSS 2.0]] までこの状況について規定していなかったので、[[著者]]はこの動作に依存する[['''べきではありません''']]。 [SRC[>>6]]

[EG[
[29] 例えば
[PRE(HTML example code)[
<DIV>
  <P>First paragraph</P>
  <P>Second paragraph</P>
</DIV>
]PRE]
... の[[架空タグ列]]は
[PRE(HTML example code)[
<DIV>
  <P><DIV::first-line><P::first-line>First paragraph</P::first-line></DIV::first-line></P>
  <P><P::first-line>Second paragraph</P::first-line></P>
</DIV>
]PRE]
... です。 [SRC[>>6]]
]EG]

[18] [[要素]]の「最初の書式付けされた行」は同じ[[フロー]]に属する[[ブロック水準]]の[[子孫]]
[WEAK[(つまり[[浮動]]や[[位置付け]]によって[[フロー外]]に置かれて''いない''[[ブロック水準]]の[[子孫]])]]
の中に出現するかもしれません。 [SRC[>>6]]

[EG[
[19] 例えば、
[PRE(HTML example code)[
<DIV><P>hoge fuga ...</P></DIV>
]PRE]
... の[[架空タグ列]]は
[PRE(HTML example code)[
<DIV><P><DIV:;first-line><P::first-line>hoge fuga</P::first-line></DIV::first-line> ...</P></DIV>
]PRE]
... となります。
]EG]

[23] [[table-cell]] や [[inline-block]] の最初の行は、[[先祖]]の最初の書式付けされた行としては扱われません。
[SRC[>>6]]

[24] [[inline-block]] はそれ全体が[[行]]に含まれているので、 [[inline-block]] 内の最初の行だけではなく全体が
[WEAK[(更に弟が [[inline-block]] と同じ行にあればそれも)]] [CODE(CSS)@en[[[::first-line]]]] の後にあるものとして扱われます。
[CODE(CSS)@en['[[inline-table]]']] も同様です。

;;
[REFS[
- [20] <http://suika.suikawiki.org/gate/2007/cssom/viewer?c=div%3A%3Afirst-line%20%7B%20color%3A%20blue%20%7D;h=%3Cdiv%3E%3Cp%20style%3D%22display%3Ainline-block%22%3Eblue%3Cbr%3Eblue%3C%2FP%3E%20blue%3Cbr%3Eblack;p=n;x=style-element;i=html-div>
]REFS]

[25] [[table-cell]] はそれが [CODE(CSS)@en['[[display]]: [[table]]']] に含まれていれば[[行]]の一部となっているわけでは''ない''ので、
[CODE(CSS)@en[::first-line]] には含まれません。 [CODE(CSS)@en[::first-line]] に相当する部分に 
[CODE(CSS)@en['[[table]]']] があるなら、 [CODE(CSS)@en[::first-line]] は存在しません。
[CODE(CSS)@en['[[table-caption]]']] でも同様です。

;;
[REFS[
- [21] <http://suika.suikawiki.org/gate/2007/cssom/viewer?c=div%3A%3Afirst-line%20%7B%20color%3A%20blue%20%7D;h=%3Cdiv%3E%3Ctable%3E%3Ctr%3E%3Ctd%3Eblack%3Cbr%3Eblack%3C%2Ftable%3E%20black%3Cbr%3Eblack;p=n;x=style-element;i=html-div>
- [22] <http://suika.suikawiki.org/gate/2007/cssom/viewer?c=div%3A%3Afirst-line%20%7B%20color%3A%20blue%20%7D;h=%3Cdiv%3E%3Ctable%3E%3Ccaption%3Eblack%3C%2Fcaption%3E%3Ctr%3E%3Ctd%3Eblack%3Cbr%3Eblack%3C%2Ftable%3E%20black%3Cbr%3Eblack;p=n;x=style-element;i=html-div>
]REFS]

[26] 最初の書式付けされた行は空の行となることもあります。 [SRC[>>6]]

[EG[
[27] 例えば、
[PRE(HTML example code)[
<p><br>hoge
]PRE]
... の最初の行は [CODE(HTML)@en[br]] までの[[空]]の行です。
]EG]

[35] [[空要素]]で[[行]]が存在しないときには [CODE(CSS)@en[[[::first-line]]]] [[擬似要素]]も作られないようです。

[36] >>27 の例のように[[行]]はあるけど空の時は [CODE(CSS)@en[[[::first-line]]]] [[擬似要素]]は存在していそうですがよくわかりません。

;; [33] [CODE(CSS)@en[[[::first-line]]]] [[擬似要素]]の処理モデルに関する規定は全体的に曖昧です。

* 継承

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

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

[32] [CODE(CSS)@en[[[::first-line]]]] [[擬似要素]]の[[子供]]に当たる[[要素]]は、
[CODE(CSS)@en[[[:first-line]]]] [[擬似要素]]に適用可能な[[特性]]のみそこから[[継承]]し、
それ以外は本来の[[親要素]]から[[継承]]します。 [SRC[>>6]]

[EG[
[15] >>14 で前半部分の[[継承]]は [CODE(HTML)@en[P]] → [CODE(CSS)[P::first-line]] → [CODE(HTML)@en[SPAN]]
と[[擬似要素]]をまたがる形になります。
]EG]

* レンダリング

[30] [CODE(CSS)@en[[[::first-line]]]] [[擬似要素]]はおおむね[[行内水準要素]]と同様に機能します。 [SRC[>>6]]

[31] 次の[[特性]]がこの[[擬似要素]]に適用されます。 [SRC[>>6]]
- フォント
- 色
- 背景
- [CODE(CSS)@en['[[word-spacing]]']]
- [CODE(CSS)@en['[[letter-spacing]]']]
- [CODE(CSS)@en['[[text-decoration]]']]
- [CODE(CSS)@en['[[vertical-align]]']]
- [CODE(CSS)@en['[[text-transform]]']]
- [CODE(CSS)@en['[[line-height]]']]
- [[利用者エージェント]]はこれ以外も適用して[['''構いません''']]。

;; [34] [CODE(CSS)@en[[[::first-line]]]] [[擬似要素]]に対する[[スタイル]]の指定によって
[CODE(CSS)@en[[[::first-line]]]] に含まれる範囲が変化してしまうこともありそうですが、
どう計算するのでしょう。。。

* 歴史

** CSS1

[REFS[
- [44] [CITE[Cascading Style Sheets, level 1]] ([TIME[1999-02-05 02:57:01 +09:00]] 版) <http://www.w3.org/TR/WD-css1-951209.html#typo>
- [42] [CITE[Cascading Style Sheets, level 1]] ([TIME[2008-04-10 02:23:32 +09:00]] 版) <http://www.w3.org/TR/CSS1/#the-first-line-pseudo-element>
]REFS]

[45] >>44 で[[擬似クラス]]として追加されました。 (当時は[[擬似要素]]はありませんでした。)

[43] [[CSS1中核]]では[[特性]]の一部または全部を[[無視]]してもよいとされていました。

** CSS2

[REFS[
- [41] [CITE@en[Selectors]] ([TIME[2011-06-07 22:09:52 +09:00]] 版) <http://www.w3.org/TR/CSS2/selector.html#first-line-pseudo>
]REFS]

* 実装

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

[REFS[
- 例その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>
]REFS]

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

- [39] [[Gecko]] ([[Firefox]] 1.0.4) の場合:
どちらも、子要素が疑似要素の子供であるかのようなレンダリング結果。
- [40] [[Konqueror]] 3.4.0 の場合:
例その1 (分断させる場合) は疑似要素が子要素の直前で終了するかのようなレンダリング結果。例その2 (含まれる場合) は疑似要素の子要素兄部分、子要素、疑似要素の子要素弟部分の3つの要素が存在して表示上の最初の行に横並びになっているかのようなレンダリング。
- [3]
[[Gecko]] ([[Firefox]] 1.5) の場合: >>2 の[[Konqueror]]と同じ。
- [4]
[[Opera]] 8.5 の場合: >>3 と同じ。ただし、[[下線]]は表示されない。

Historical Legal Sensitive Parent: [Help / License]

Edit

Page

Errors

Page name(s)