::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> に囲まれた文字列のうち、最初の文字だけを赤色にする例を示す。

CSS:

p.example::first-line {
  color: red;
}

HTML:

<p class="example">最初の1文字だけ赤くなります。</p>

表示:

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

このエントリーをはてなブックマークに追加
スポンサーリンク