first-letter擬似要素

TOPページに戻る > CSS

first-letter擬似要素

p要素、div要素などブロック要素の1文字目のスタイルを変更できます
1文字目が一つの要素のようにスタイルを適用できます

使い方（書式）css

要素:first-letter { color : red; }

対応ブラウザ

※IE6は対応していますがバグがあります。first-letter擬似要素を適用している要素にmargin-leftを適用すると、位置がずれてしまいます。左のスペースはpadding-leftを使ってください

実際の指定方法

一文字目を赤色にしています。他にも文字を大きくしたり、斜体にしたり、背景をつけたり、いろいろできます

cssファイル

p:first-letter { color : red; }

html部分

<p>先頭の文字がfirst-letter擬似クラスでスタイルが変わってます</p>

実際の表示

先頭の文字がfirst-letter擬似クラスでスタイルが変わってます

要素を属性セレクタ、classセレクタ、idセレクタで絞り込む

first-letter擬似要素はセレクタと併用できます
適用箇所を限定したい場合は最初の要素にclassセレクタ、idセレクタ、属性セレクタをつけます（今回はclassセレクタで）
※html要素に属性がついている場合は属性セレクタが使えるのでソースがすっきりします

cssファイル

p.hoge:first-letter { color : red; }

html部分

<p class="hoge">先頭の文字がfirst-letter擬似クラスでスタイルが変わってます</p>