最初の1文字に特定のcssスタイルを適用する方法

文字列の最初の1文字だけ、特定のスタイルを適用したいときはcssの::first-letterを使えば楽ちん。

たとえばpタグの中とか。

p::first-letter {
  font-size: var(--font-size-36);
  font-weight: var(--font-weight-bold);
  color: var(--text-accent);
  line-height: 0.8;
}

さらに、first-of-typeなんかとも組み合わせできる。CMSだと、複数のpタグ入りの文字情報を受け取ったりして、そんなときに全体を通して最初の1文字を変えたいときなんかこっちの設定がよい。

p:first-of-type::first-letter {
  font-size: var(--font-size-36);
  font-weight: var(--font-weight-bold);
  color: var(--text-accent);
  line-height: 0.8;
}

まさか、そんな設定ないだろうと思ったけどあった。