::first-letter (:first-letter)

概要

CSS の ::first-letter  擬似要素 は、ブロックの最初の行について、最初の文字より前に他のコンテンツ（画像やインラインテーブルなど）がないときに、その文字にマッチします。

【訳注: 次の例のように、この擬似要素は複数の文字にマッチするかもしれません】

要素の最初の文字は、わかりやすいものであるとは限りません:

• 句読点 (punctuation)。これは、Unicode の open (Ps)、close (Pe)、initial quote (Pi)、final quote (Pf)、other punctuation (Po) の各クラスで定義されているすべての文字です。最初の文字に先行している句読点や、すぐ後ろに続いている句読点も同様に、擬似要素にマッチします。
• 同様に、言語によってはオランダ語の IJ のように、常に大文字になる連字があります。この場合、連字の両方が ::first-letter 擬似要素にマッチするでしょう（この仕様をサポートするブラウザはほとんどありません。ブラウザの実装状況 をご覧ください）。
• 最後に、::before 擬似要素と content プロパティを組み合わせて、テキストを要素の始めに入れることができます。この場合、::first-letter は生成されたコンテンツの最初の文字にマッチします。

「最初の行」は、ブロックコンテナのボックス でのみ意味を持つ概念です。したがって ::first-letter 擬似要素は、display の値が block、inline-block、table-cell、list-item、table-caption のいずれかである場合にのみ効果を持ちます。その他の場合には ::first-letter は効果を持ちません。

CSS ルールセットの宣言ブロックでは、CSS プロパティの小さなサブセットだけを使えます。サブセットには、::first-letter 擬似要素を使ったセレクタを含みます:

• フォントの全プロパティ : font、font-style、font-variant、font-weight、font-size、line-height、font-family
• 背景の全プロパティ : background-color、background-image、background-position、background-repeat、background-size、background-attachment
• マージンの全プロパティ: margin、margin-top、margin-right、margin-bottom、margin-left
• パディングの全プロパティ: padding、padding-top、padding-right、padding-bottom、padding-left
• ボーダーの全プロパティ: 簡略化プロパティである border、border-style、border-color、border-width と、個々の非簡略化プロパティ
• color
• text-decoration、text-transform、letter-spacing、word-spacing（妥当な場合）、line-height、float、vertical-align（float が none の場合のみ）

この一覧は将来的に拡張される可能性があるにしても、CSS の 将来性の担保として、宣言ブロックでこれ以外のプロパティを使わないほうがよいでしょう。

例

/* 全段落の最初の文字を赤にして大きくする */

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

仕様

ブラウザ実装状況