::first-letter (:first-letter)

概要

CSS::first-letter  擬似要素 は、ブロックの最初の行について、最初の文字より前に他のコンテンツ(画像やインラインテーブルなど)がないときに、その文字にマッチします。

【訳注: 次の例のように、この擬似要素は複数の文字にマッチするかもしれません】

要素の最初の文字は、わかりやすいものであるとは限りません:

  • 句読点 (punctuation)。これは、Unicode の open (Ps)、close (Pe)、initial quote (Pi)、final quote (Pf)、other punctuation (Po) の各クラスで定義されているすべての文字です。最初の文字に先行している句読点や、すぐ後ろに続いている句読点も同様に、擬似要素にマッチします。
  • 同様に、言語によってはオランダ語の IJ のように、常に大文字になる連字があります。この場合、連字の両方が ::first-letter 擬似要素にマッチするでしょう(この仕様をサポートするブラウザはほとんどありません。ブラウザの実装状況 をご覧ください)。
  • 最後に、::before 擬似要素と content プロパティを組み合わせて、テキストを要素の始めに入れることができます。この場合、::first-letter は生成されたコンテンツの最初の文字にマッチします。

「最初の行」は、ブロックコンテナのボックス でのみ意味を持つ概念です。したがって ::first-letter 擬似要素は、display の値が blockinline-blocktable-celllist-itemtable-caption のいずれかである場合にのみ効果を持ちます。その他の場合には ::first-letter は効果を持ちません。

CSS ルールセットの宣言ブロックでは、CSS プロパティの小さなサブセットだけを使えます。サブセットには、::first-letter 擬似要素を使ったセレクタを含みます:

この一覧は将来的に拡張される可能性があるにしても、CSS の 将来性の担保として、宣言ブロックでこれ以外のプロパティを使わないほうがよいでしょう。

CSS 2 では、擬似要素のプレフィックスはコロンが1つだけでした。擬似クラスも同じ約束に従うため、両者は見分けがつきませんでした。この解決のため、CSS 2.1 は擬似要素の約束を変更しました。現在は擬似要素のプレフィックスは 2 つのコロンで、擬似クラスでは 1 つのコロンです。

複数のブラウザのリリース版ですでに CSS 2 版が実装されていますが、すべてのブラウザは 2-コロンの構文と同じく、旧式の 1-コロンの構文もサポートしています。

もし古いブラウザのサポートが必要なら、 :first-letter を使う他ありません。そうでなければ ::first-letter を使うのがよいでしょう。

/* 全段落の最初の文字を赤にして大きくする */

p:first-letter { 
  color: red; 
  font-size: 130%; 
}

仕様

仕様書 策定状況 コメント
Selectors Level 3 勧告 リスト項目での edge-case の挙動や、特定言語用の挙動(例えばオランダ語の連字 IJ)を定義。擬似要素用の 2-コロン構文を導入
CSS Level 2 (Revision 1) 勧告 重要な変更なし。CSS Level 2 は 1-コロン構文を使いました
CSS Level 1 勧告 初回定義。1-コロン構文を使いました

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本サポート 1.0 1.0 (1.7 or earlier) 9.0 7.0 1.0 (85)
旧式の 1-コロン構文(:first-line) 1.0 1.0 (1.7 or earlier) 5.5 3.5 1.0 (85)
オランダ語の連字 IJ のサポート 未サポート 未サポート 未サポート 未サポート 未サポート
機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本サポート ? 1.0 (1) 未サポート ? ?
旧式の 1-コロン構文 (:first-line) ? 1.0 (1) ? ? ?
オランダ語の連字 IJ のサポート ? 未サポート ? ? ?

Document Tags and Contributors

Contributors to this page: sosleepy, ethertank
最終更新者: ethertank,
サイドバーを隠す