【CSSセレクタ】E:first-letter

『セレクタ:first-letter』で、要素の最初の行の最初の文字に適用でき、こちらは一般に『擬似要素』と呼ばれます。IE8以下のブラウザでは動きません。

注意点として、ブラウザにレンダリングされた後の最初の行の最初の文字に適用されるものとなり、ソースコード上の最初の行の最初の文字ではありません。そして最初の文字の前にimg要素などが存在している場合も反映されません。その他、この『:first-line』は『display』プロパティの値が『block』、『inline-block』、『table-cell』、『table-caption』等である場合のみ反映されますのでインライン要素などでは反映されません。ご注意ください。

サンプルコード

p:first-letter { color: red;} /* 最初の行の最初の文字を赤字にします。 */

ブラウザでの表示結果

p:first-letter { color: red;} /* 最初の行の最初の文字を赤字にします。 */

<p>
	最初の行の最初の文字が赤字になります。
	ソースコード上の<br>最初の行の最初の文字ではありませんのでご注意ください。
</p>

対応ブラウザ

デスクトップ

Chrome

1 以降 ○

Firefox

1 以降 ○

Safari

1 以降 ○

Edge

12 以降 ○

全バージョンで対応しています

IE

11 ○

10 ○

9 ○

8 △

7 △

6 △

Opera

7 以降 ○

6 △

5 △

4 △

↑ 『:first-letter』として対応

2 以前 ×

モバイル

iOS Safari

1 以降 ○

Android Browser

37 以降 ○

36 以前 ×

Chrome Android

最新版 ○

デスクトップ版と同等の対応です

Firefox Android

最新版 ○

デスクトップ版と同等の対応です

※ バージョン情報は MDN に基づいています。

トップページへ

Tweet

シェアする