::first-letter | スタイルシートリファレンス

::first-letterとは?

CSSの::first-letterはブロックレベル要素の最初の行かつ最初の一文字にスタイルを適用できる疑似要素です。インラインレベル要素には適用できず、更に最初の文字の前に他コンテンツがあると適用できないので注意しましょう。

::first-letter:first-letter両方の書き方がありますが、擬似クラスと疑似要素を区別するためCSS3で::first-letterが登場しました。どちらの記述でも動作しますが、一部のブラウザでは古い:first-letterしか動作しない場合がありますので注意しましょう。

構文

/* CSS3(IEでの取り扱いは注意)*/
::first-letter

/* CSS2  */
:first-letter

::first-letterを使ったサンプルコード

通常の使い方

上記のサンプルコードではp::first-letterの指定により、p要素の最初の文字に対して文字を太くするスタイルを適用しています。

結果として各p要素の最初の文字のみ太字となっています。

インラインレベル要素に対しては効かない

上記のサンプルコードでは.inlineのクラスセレクタのみインラインレベル要素に変更しています。その場合は最初の文字の指定のp::first-letterが効かなくなっているのが確認できるかと思います。

::first-letterを利用する際はブロックレベル要素に対して使用するようにしましょう。

::first-letterのブラウザ対応状況

CSSの::first-letterの疑似要素はほとんどのモダンなブラウザで動作します。ただしIE8では:first-letter(コロンが1つのみ)の書き方を認識するなど注意点もあります。

::first-letterのブラウザ毎の対応状況を確認したい方は下記よりご確認頂けます。

Can I use... Support tables for HTML5, CSS3, etc

::first-letterの関連情報

効かない場合

::first-letterを設定していても効かない場合があります。その場合は下記を参考にしましょう。

CSSの::first-letterが効かない場合の対処法!のイメージ
CSSの::first-letterが効かない場合の対処法!
CSSの::first-letterは最初の一文字目に対してスタイルを適用できる疑似要素でえすが、::first-letterを設定していても効かないケースがあります。::first-letterが効かない場合の対処法をサンプルコード付きで解説します。

最後の文字にスタイルを適用するには?

最初の文字に対しては::first-childの疑似要素がありますが、最後の文字に対する疑似要素はありません。

最後の文字に対してスタイルを適用させる方法について下記でまとめていますので、ぜひ参考にしてみて下さい。

CSSで最後の文字にスタイルを適用させる方法!のイメージ
CSSで最後の文字にスタイルを適用させる方法!
CSSで最後の文字に対してスタイルを適用させる方法についてサンプルコード付きで解説します。最初の文字は::first-letterの疑似要素がありますが、最後の文字に対しては専用の疑似要素がありません。代替案となる方法を解説します。