【:first-letter擬似要素】1文字目に適用する

:first-letter擬似要素では、指定した要素の最初の1文字目のみにスタイルを適用することができます。

ただし:first-letter疑似要素はインライン要素には適用できません。 指定できるのは、ブロックレベル要素、inline-blockの要素、li要素、テーブル(表)のセルとキャプションとなります。

また:first-letterが指定された要素は、floatプロパティの値がnoneの場合、インライン要素のような扱われ方をします。 ですがnone以外の場合は、floatを適用したような状態となります。

最初の1文字目に「"」などの引用符がある場合は、言語によって異なりますが、「"」などを含んだ2文字目(それ以上の場合もある)にも適用されます。 ただしテキストの前にimg要素などがある場合は適用されません。

なお:first-letter擬似要素に適用できるプロパティは決まっており、下記のプロパティ以外を指定しても適用されません。 ですがUA(ブラウザ)によっては適用できるプロパティもあるようです。 また下記の一覧は将来的に拡張される可能性もあります。

書式

  • 要素名:first-letter {プロパティ名:値;} ……… 要素の最初の1文字目にスタイルを適用する

適用できるプロパティ

使用した時の例

p:first-letter {color: red;}

/* floatをnone以外にした場合 */
p.sample1:first-letter {
  float: left;
  color: #5E6ABA;
  font-size: 4em;
  font-weight: bold;
  margin: 0 5px 5px 0;
  line-height: 0.8;
}
<p>最初の1文字目が赤色になります</p>

<p class="sample1">
疑似要素ってなに?<br />
疑似要素はhtmlの要素では指定できない性質に対してスタイルを適用するためのものです。<br />
例えば、この「:first-letter」も疑似要素の一つです。<br />
セレクタって組み合わせられる?<br />
セレクタは組み合わせて使用できます。<br />
そのためにはセレクタ同士を
</p>

ブラウザ上の表示例

最初の1文字目が赤色になります

疑似要素ってなに?
疑似要素はhtmlの要素では指定できない性質に対してスタイルを適用するためのものです。
例えば、この「:first-letter」も疑似要素の一つです。
セレクタって組み合わせられる?
セレクタは組み合わせて使用できます。
そのためにはセレクタ同士を

※line-heightを調節すると、1文字目の行の高さを調整できます

対応ブラウザなどのデータ

適用対象 要素(displayプロパティの値がblock、inline-block、table-cell、list-item、table-caption のいずれか)の最初の1行目
対応ブラウザ Internet Explorer5.5~ , Google Chrome1~ , Firefox1~ , Opera3.5~ , Safari1~

関連情報