[4] [DFN[[CODE(CSS)@en[[[::first-letter]]]]]] [[擬似要素]]は[[要素]]の最初の [[letter]] を表します。
これは [[initial caps]] ([[drop caps]]) を実現するのに便利です。 [SRC[>>5]]

* 仕様書

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

* 適用対象

[19] [CODE(CSS)@en[[[::first-letter]]]] [[擬似要素]]は
[[CSS]] では[[ブロック水準包含子]] ([[ブロック]]、[[list-item]]、[[table-cell]]、
[[table-caption]]、[[inline-block]] など) に適用されます。 [SRC[>>5]]

[20] [CODE(CSS)@en[[[::first-letter]]]] [[擬似要素]]は[[テキスト]]を含むか、同じ[[フロー]]にあって[[テキスト]]を含む[[子孫]]を持つ[[要素]]で使うことができます。
[SRC[>>5]]

* 最初の letter

[9] 「最初の [[letter]]」でいう [[letter]] には[RUBYB[[[数字]]]@en[digit]] も含まれます。 [SRC[>>5]]

[6] [[要素]]の最初が[[画像]]や[[行内表]]や [[inline-block]] など[[文字]]以外の[[内容]]なら、「最初の [[letter]]」
はありません。 [SRC[>>5]]

[EG[
[24] 例えば
[PRE(HTML example code)[
<DIV><P STYLE="display: inline-block">Hello<BR>Goodbye</P> etcetera</DIV>
]PRE]
... は最初の文字に当たる部分が [[inline-block]] であるため、 [CODE(CSS)@en[[[::first-letter]]]]
[[擬似要素]]が存在しません [SRC[>>5]]。
]EG]

[17] 「最初の [[letter]]」は「[[最初の書式付き行]]」 ([CODE(CSS)@en[[[::first-line]]]])
に含まれているものです。 [SRC[>>5]]

[EG[
[18] 例えば
[PRE(HTML example code)[
<p><br>First...
]PRE]
... は最初の行が空で何も [[letter]] を含まないので、 [CODE(CSS)@en[[[::first-letter]]]]
[[擬似要素]]は作られません。 [SRC[>>5]]
]EG]

[7] 最初の [[letter]] の前後に[RUBYB[[[句読点]]]@en[punctuation]]
([[Ps]], [[Pe]], [[Pi]], [[Pf]], [[Po]] の[[文字]]) があるなら、これも含める[['''べきです''']]。
[SRC[>>5]]

[8] 最初の [[letter]] の前の[[引用符]]も含める[['''べきです''']]。 [SRC[>>5]]

[10] [[結合文字]]や[[言語]]ごとの規則などにより、句読点でない最初の[[文字]]の後に来る文字も含めるべきであることもあります。
「最初の [[letter]]」には少なくても [[default grapheme cluster]] [SRC[[[UAX #29]]]] を含めるべきであり、
必要なら更に後まで含めても構いません。 [SRC[>>5]]

[EG[
[11] 例えば[[ドイツ語]]では[[要素]]のはじめが「ij」ならこの2文字を共に「最初の [[letter]]」
として扱うべきです。 [SRC[>>5]]
]EG]

* 架空タグ列

[21] [CODE(CSS)@en[[[::first-letter]]]] [[擬似要素]]も [CODE(CSS)@en[[[::first-line]]]]
[[擬似要素]]と同じ[[架空タグ列]]により適用される範囲が説明されています。

[22] [CODE(CSS)@en[[[::first-letter]]]] [[擬似要素]]の[[架空開始タグ]]は最初の[[テキスト]]の直前にあるものとする[['''べきです''']]
[SRC[>>5]]。

[EG[
[23] 例えば
[PRE(HTML example code)[
<div>
<p>The first text.
]PRE]
... の[[架空タグ列]]は
[PRE(HTML example code)[
<div>
<p><div::first-letter><p::first-letter>T</p::first-letter></div::first-letter>he first text.
]PRE]
... となります [SRC[>>5]]。 [CODE(HTMLe)@en[[[div]]]] の最初の[[テキスト]]は
[CODE(HTMLe)@en[[[p]]]] 内にあるので、架空開始タグもその中となります。
[CODE(HTMLe)@en[[[p]]]] の[[擬似要素]]は [CODE(HTMLe)@en[[[div]]]] の[[擬似要素]]の内側となります。
]EG]

[12] 「最初の [[letter]]」が他の[[要素]]にまたがる場合には一方または両方の[[要素]]から [CODE(CSS)@en[[[::first-letter]]]]
[[擬似要素]]を作成しても構いませんし、[[擬似要素]]を作成しなくても構いません。 [SRC[>>5]]

[EG[
[13] 例えば
[PRE(HTML example code)[
<p>'<em>T...
]PRE]
... は「'T」が [CODE(CSS)@en[[[::first-element]]]] に含まれるべきところですが、[[子要素]]にまたがっているので、
どちらか1文字だけ、2文字とも、あるいは[[擬似要素]]なしのいずれかを[[利用者エージェント]]は選ぶことができます。
[SRC[>>5]]
]EG]

[14] 最初の [[letter]] が ([[bidi]] などの理由で) [[行]]の先頭に来ない時も、
[[擬似要素]]を作らなくても構いません。 [SRC[>>5]]

* 他の擬似要素との関係

[25] [CODE(CSS)@en['[[list-item]]']] では、 [[principle box]] の最初の [[letter]] が [CODE(CSS)@en[[[::first-letter]]]]
となります。 [[marker]] は [CODE(CSS)@en[[[::first-letter]]]] ではありません。 [SRC[>>5]]

[26] ただし [CODE(CSS)@en['[[list-style-position]]: [[inside]]']] のときは 
[CODE(CSS)@en[[[::first-letter]]]] [[擬似要素]]を無視して[['''構いません''']] [SRC[>>5]]。

[27] [CODE(CSS)@en[[[::before]]]] や [CODE(CSS)@en[[[::after]]]] は、最初の [[letter]]
の対象に含まれています。 [SRC[>>5]]

[EG[
[28] 例えば 
[PRE(CSS example code)[
p::before {content: "Note: "}
]PRE]
... が適用される[[要素]]の [CODE(CSS)@en[[[::first-letter]]]] には「N」が含まれます。 [SRC[>>5]]
]EG]

* 継承

[15] [[継承]]は [CODE(CSS)@en[[[::first-line]]]] 同様に[[架空タグ列]]によって説明されています。
[[擬似要素]]はそれが含まれる[[擬似要素]]や[[要素]]から[[継承]]します。

[EG[
[16] 例えば
[PRE(HTML example code)[
<P>Some text that ends up on two lines</P>
]PRE]
... に
[PRE(CSS example code)[
p { color: red; font-size: 12pt }
p::first-letter { color: green; font-size: 200% }
p::first-line { color: blue }
]PRE]
... が適用されると、[[架空タグ列]]は
[PRE(HTML example code)[
<P>
<P::first-line>
<P::first-letter> 
S 
</P::first-letter>ome text that 
</P::first-line> 
ends up on two lines 
</P>
]PRE]
... となります。「S」は 24pt、青色でレンダリングされます。 [SRC[>>5]]
]EG]

* メモ

[1]
[CITE[hail2u.net - Weblog - :first-letter擬似要素と各擬似クラス絡みのInternet Explorer 6のバグ]] <http://hail2u.net/blog/webdesign/first-letter-and-msie-6.html>
([[名無しさん]] [WEAK[2006-08-23 00:10:27 +00:00]])

[2]
[CITE@ja[TextノードをDOMツリーから取り除いたとき、first-letter擬似要素内の文字として扱われている文字だけ残る]] ([CODE[2007-03-08 17:44:44 +09:00]] 版) <http://quaa.jf.land.to/opera/first-letter>
([[名無しさん]] [WEAK[2007-03-08 11:36:59 +00:00]])


[3]
[CITE@ja[IEでfirst-letter疑似要素のセレクタが変:メモランダム]] ([TIME[2007-04-03 04:17:47 +09:00]] 版) <http://mynotes.jp/blog/2007/03/ie_first_letter>