::first-letter CSS擬似要素

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

書式

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

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

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

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

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

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

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

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

疑似クラスとの併用

CSSの疑似クラスと疑似要素を併用する場合、疑似クラスを先に指定する。

疑似クラス(:first-child)と疑似要素(::first-letter)を併用する例を次に示す。

li:first-child::first-letter {
  /* properties */
}

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

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

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

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

テキストの先頭に約物(括弧や句読点など文字以外の記号)が含まれる場合、先頭から約物を除いた最初の1文字目までにスタイルが適用される。

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

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

<p class="example">
  "Only the first character turns red."
</p>

"Only the first character turns red."

適用できる要素

::first-letter擬似要素はブロックレベル要素に対して適用できる。具体的には次の要素である。

CSSプロパティに「display: block;」を指定した要素に対しても::first-letter擬似要素を適用できる。

適用できるプロパティ

::first-letter疑似要素では次のプロパティを適用できる。

CSS疑似要素

CSSの疑似要素には次のものがある。