CSS ::first-letter

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

書式

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

[element][.class]::first-letter {
  /* properties */
}
element
要素タイプを指定する。要素タイプの指定を省略した場合は、すべての要素が対象となる。 
*::first-letter {
  color: black;
}
p::first-letter {
  color: red;
}
.class
クラスを指定する。

英文でよく行われる最初の1文字を大きくする例を次に示す。

<style>
  p.first-paragraph {
    font-size: 12pt;
    line-height: 1.2
  }
  p.first-paragraph::first-letter {
    font-size: 200%;
    font-weight: bold;
    float: left
  }
</style>
<p class="first-paragraph">
  In a hole in the ground there lived a hobbit. Not a nasty, dirty, wet hole, filled with
  the ends of worms and an oozy smell, not yet a dry, bare, sandy hole with nothing in it
  to site down on or to eat: it was a hobbit-hole, and that means comfort.
</p>

In a hole in the ground there lived a hobbit. Not a nasty, dirty, wet hole, filled with the ends of worms and an oozy smell, not yet a dry, bare, sandy hole with nothing in it to site down on or to eat: it was a hobbit-hole, and that means comfort.

指定した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">
   最初の１文字だけ赤くなります。
</p>

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

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

約物

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

<head>
  <style>
    p::first-line {
      color: red;
    }
  </style>
</head>
<body>
  <p>「最初の１文字だけ赤くなります。」</p>
  <p>"Only the first character turns red."</p>
</body>

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

"Only the first character turns red."

適用できる要素

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

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

適用できるプロパティ

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

CSS疑似要素

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