CSS::first-letter 擬似要素は、ブロックレベル要素の最初の行の最初の文字にスタイルを適用します。ただし、最初の文字より前に他のコンテンツ(画像やインラインテーブルなど)がないときに限ります。

/* <p> の最初の文字を選択します */
p::first-letter {
  font-size: 130%;
}

要素の最初の文字は、常に単純に識別できるとは限りません。

  • 最初の文字のすぐ前後にある区切り文字 (punctuation)も範囲に含まれます。区切り文字とは、 Unicode の open (Ps)、close (Pe)、initial quote (Pi)、 final quote (Pf)、 other punctuation (Po) の各クラスで定義されているすべての文字です。
  • 言語によっては常に一緒に大文字化される連字があります。例えばオランダ語の IJ などです。この場合、連字の両方の文字が ::first-letter 疑似要素で選択されます(これについてのブラウザ―の対応はあまりありません。ブラウザー実装状況をご覧ください)。
  • ::first-letter は生成されたコンテンツの最初の文字を選択します。

CSS3 では疑似クラス疑似要素を見分けやすくするために、 ::first-letter の表記法(二重コロン付き)が導入されました。ブラウザーでは CSS2 で導入された :first-letter も使用できます。

利用可能なプロパティ

::first-letter 擬似要素では、一部の CSS プロパティのみが利用できます。

構文

/* CSS3 syntax */
::first-letter

/* CSS2 syntax */
:first-letter

各段落の最初の文字を赤く大きくします。

HTML

<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
  ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
  dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
  aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
  esse molestie consequat.</p>
<p>-The beginning of a special punctuation mark.</p>
<p>_The beginning of a special punctuation mark.</p>
<p>"The beginning of a special punctuation mark.</p>
<p>'The beginning of a special punctuation mark.</p>
<p>*The beginning of a special punctuation mark.</p>
<p>#The beginning of a special punctuation mark.</p>
<p>「先頭の特殊区切り記号です。</p>
<p>《先頭の特殊区切り記号です。</p>
<p>“先頭の特殊区切り記号です。</p>

CSS

p::first-letter {
  color: red;
  font-size: 130%;
}

結果

仕様書

仕様書 策定状況 コメント
CSS Pseudo-Elements Level 4
::first-letter の定義
草案 利用できるプロパティを組版、文字装飾、インライン配置、 opacitybox-shadow に一般化。
CSS Text Decoration Module Level 3
text-shadow with ::first-letter の定義
勧告候補 ::first-lettertext-shadow が使用できるようになった。
Selectors Level 3
::first-letter の定義
勧告 疑似要素用の二重コロン構文の導入。リスト項目での使用時やや特定言語向け(例えばオランダ語の連字 IJ)など、特殊な場合の挙動の定義。
CSS Level 2 (Revision 1)
::first-letter の定義
勧告 変更なし。
CSS Level 1
::first-letter の定義
勧告 初回定義、単一コロン構文を使用。

ブラウザー実装状況

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応

1

11

あり

あり1

1

11

9

5.51

7

3.51

1

11

Support for the Dutch digraph IJ なし なし なし2 なし なし なし
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 ? ?

あり

あり1

4

41

? ? ?
Support for the Dutch digraph IJ ? ? なし なし2 ? ? なし

1. Supported as :first-letter.

2. See bug 92176.

関連項目

ドキュメントのタグと貢献者

このページの貢献者: SphinxKnight, mfuji09, ethertank, sosleepy
最終更新者: SphinxKnight,