【:first-line擬似要素】最初の1行にスタイルを適用する

:first-line擬似要素では、指定した要素の最初の1行目にスタイルを適用することができます。 例えば段落の1行目として表示された部分のみにスタイルを適用させることが可能です。

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

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

書式

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

※要素名には、「#id名」や「.クラス名」も指定できます

適用できるプロパティ

※上記でリンクしていないプロパティはCSS3で追加されたものとなります。

使用した時の例

p:first-line {color: red;}
p.sample:first-line {text-decoration: underline;}
<p>
今日の朝ごはんはリンゴです。<br />
明日の昼ご飯はスイカです。<br />
明日はメロンです。
</p>

<p class="sample">
今日の夕食はカップ麺です<br />
明日の夕食はカップ焼きそばです<br />
明日の夕食はラーメンです
</p>

ブラウザ上の表示例

今日の朝ごはんはリンゴです。
明日の昼ご飯はスイカです。
明日はメロンです。

今日の夕食はカップ麺です
明日の夕食はカップ焼きそばです
明日の夕食はラーメンです

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

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

関連情報