Caution

お使いのブラウザはJavaScriptが無効になっております。
当サイトでは検索などの処理にJavaScriptを使用しています。
より快適にご利用頂くため、JavaScriptを有効にしたうえで当サイトを閲覧することをお勧めいたします。

CSS辞典

トップページ
CSS辞典
【CSSセレクタ】E:first-line

【CSSセレクタ】E:first-line

『セレクタ:first-line』で、要素の最初の行に適用でき、こちらは一般に『擬似要素』と呼ばれます。IE8以下のブラウザでは動きません。

注意点として、ブラウザにレンダリングされた後の最初の行に適用されるものとなり、ソースコード上の最初の行ではありません。その他、この『:first-line』は『display』プロパティの値が『block』、『inline-block』、『table-cell』、『table-caption』等である場合のみ反映されますのでインライン要素などでは反映されません。ご注意ください。

サンプルコード

style.css

/* 最初の行を赤字にする */
p:first-line { color: red;}

/* 最初の行を太字・大きめのフォントにする */
p:first-line { font-weight: bold; font-size: 1.1em;}

/* 記事の最初の行だけ色を変える */
.article p:first-child::first-line { color: #2c3e50; letter-spacing: 0.05em;}

/* 詩など：最初の行を大文字に */
.poem:first-line { text-transform: uppercase;}

ブラウザでの表示結果

p:first-line { color: red;} /* 最初の行を赤字にします。 */

<p>
	最初の行が赤字になります。
	ソースコード上の<br>最初の行ではありませんのでご注意ください。
</p>

対応ブラウザ

デスクトップ

Chrome

1 以降 ○

Firefox

1 以降 ○

Safari

1 以降 ○

Edge

12 以降 ○

11 ○

10 ○

9 ○

8 △

7 △

6 △

Opera

7 以降 ○

6 △

5 △

4 △

↑ 『:first-line』として対応

2 以前 ×

モバイル

iOS Safari

1 以降 ○

Android Browser

4.4 以降 ○

3 以前 ×

Chrome Android