::first-letter CSS擬似要素

::first-letterとは、選択した要素の最初の文字にスタイルを指定するために使うCSS擬似要素である。

書式

指定した要素タイプの最初の文字

element::first-letter {
  /* properties */
}

指定した要素タイプのうち、指定したクラスを持つ要素の最初の文字

element.class::first-letter {
  /* properties */
}

指定したクラスを持つ要素の最初の文字

.class::first-letter {
  /* properties */
}

指定したIDの要素の最初の文字

#id::first-letter {
  /* properties */
}

<p class="example">と</p> に囲まれた文字列のうち、最初の文字だけを赤色にする例を示す。

p.example::first-line {
  color: red;
}
<p class="example">
  最初の1文字だけ赤くなります。
</p>

上記のHTMLはウェブ・ブラウザで次のように表示されます。

最初の1文字だけ赤くなります。

CSS疑似要素