::first-line (:first-line)

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

::first-lineCSS擬似要素で、ブロックレベル要素の最初の行にスタイルを適用します。なお、最初の行の長さは要素の幅、文書の幅、文字列のフォントの大きさなど、様々な要因に左右されます。

css
/* <p> の最初の行を選択 */
p::first-line {
  color: red;
}

試してみましょう

メモ: CSS3 では ::first-line という (二重コロン付き) 表記が、擬似クラス擬似要素を見分けやすくするために導入されました。ブラウザーでは CSS2 で導入された :first-line も使用できます。

利用可能なプロパティ

構文

Error: could not find syntax for this item

HTML

html
<p>
  スタイルはこの段落の最初の行にのみ適用されます。
  その後のすべての文字列は普通のスタイルになります。分かりますか?
</p>

<span
  >ブロックレベル要素ではないので、この文字列の最初の行は、
  特殊なスタイルになりません。</span
>

CSS

css
::first-line {
  color: blue;
  text-transform: uppercase;

  /* 警告: これらを使用しないでください */
  /* ::first-line 擬似要素では多くのプロパティが無効になります */
  margin-left: 20px;
  text-indent: 20px;
}

結果

仕様書

Specification
CSS Pseudo-Elements Module Level 4
# first-line-pseudo

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
::first-line
Support on SVG <text> element

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.
Uses a non-standard name.
Has more compatibility info.

関連情報