::first-letter (:first-letter)

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

/* <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 擬似要素で選択されます (これについてのブラウザーの互換性はあまりありません。ブラウザーの互換性をご覧ください)。
• ::before 擬似要素及び content プロパティの組み合わせにより、要素の先頭にテキストが挿入されることがあります。この場合、 ::first-letter は生成されたこのコンテンツの最初の文字に一致します。

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

• フォントの全プロパティ : font, font-style, font-feature-settings, font-kerning, font-language-override, font-stretch, font-synthesis, font-variant, font-variant-alternates, font-variant-caps, font-variant-east-asian, font-variant-ligatures, font-variant-numeric, font-variant-position, font-weight, font-size, font-size-adjust, line-height and font-family
• 背景の全プロパティ : background, background-color, background-image, background-clip, background-origin, background-position, background-repeat, background-size, background-attachment, and background-blend-mode
• マージンの全プロパティ: 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, border-radius, border-image, および個別指定プロパティ
• color プロパティ
• The text-decoration, text-shadow, text-transform, letter-spacing, word-spacing (when appropriate), line-height, text-decoration-color, text-decoration-line, text-decoration-style, box-shadow, float, vertical-align （float が none の場合のみ） の CSS プロパティ

/* CSS3 syntax */
::first-letter

/* CSS2 syntax */
:first-letter

この例では、 ::first-letter 疑似要素を使用して、 <h2> の直後の段落の最初の文字にドロップキャップ効果を作成します。

HTML

<h2>My heading</h2>
<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>

CSS

p {
  width: 500px;
  line-height: 1.5;
}

h2 + p::first-letter {
  color: white;
  background-color: black;
  border-radius: 2px;
  box-shadow: 3px 3px 0 red;
  font-size: 250%;
  padding: 6px 3px;
  margin-right: 6px;
  float: left;
}

結果

この例では、特殊な区切り文字や非ラテン文字に対する ::first-letter の効果を説明しています。

HTML

<p>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: 150%;
}

結果

• ::first-line