::first-line (:first-line)

概要

CSS::first-line 擬似要素 は、要素の最初の行にだけスタイルを適用します。最初の行にあるテキストの量は、要素や文書の幅だけでなく、テキストのフォントサイズなど、様々な要因に左右されます。他のすべての擬似要素と同じく、::first-line を含むセレクタは本当の HTML 要素には一切マッチしません。

「最初の行」は ブロックコンテナのボックス 内でのみ意味を持つ概念です。したがって ::first-line 擬似要素は、 display プロパティの値が blockinline-blocktable-celltable-caption のいずれかである要素にだけ効果を持ちます。これ以外では ::first-line は効果を持ちません。

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

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

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

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

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

p::first-line { text-transform: uppercase }
/* 全段落の最初の行の文字を大文字に変えます。*/
p::first-line { margin-left: 20px }
/* margin-left が first-line 擬似要素に適用できないため、このルールは何もしません。*/
p::first-line { text-indent: 20px }
/* text-indent が first-line 擬似要素に適用できないため、このルールは何もしません。*/

仕様

仕様書 策定状況 コメント
Selectors Level 3 勧告 要素の「最初の行」の定義の言い換え。擬似要素に 2-コロン構文を導入
CSS Level 2 (Revision 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)
機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本サポート ? 1.0 (1) 未サポート ? ?
旧式の 1-コロン構文 (:first-line) ? 1.0 (1) ? ? ?

 

ドキュメントのタグと貢献者

最終更新者: ethertank,
サイドバーを隠す