CSS ::first-line 疑似要素| CSS:スタイルシート関数要素使い方・書き方例 CSS サンプル

2018-06-05 css-reference

ページコンテンツ

▼::first-line 疑似要素 CSS プロパティとは
▼疑似要素セレクター ::first-line
▼実例コード 1
▼構文
▼サポートするデスクトップブラウザ対応・互換性
▼サポートするモバイルブラウザ対応・互換性

`::first-line` 疑似要素 CSS プロパティとは

トピック：指定されたセレクタのブロックレベル要素の最初の行にスタイルを追加するために使用される、事ができる最初の行の長さは、要素の幅、ドキュメントの幅、文字列のフォントサイズなどのさまざまな要因に依存する

疑似要素セレクター `::first-line`

実例コード 1

サンプルコードを試す

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

構文

::first-line { css : properties ; }
 疑似要素名 {スタイル要素のプロパティ : プロパティ値; }

CSS バージョン	CSS 3　::first-line

CSS バージョン	CSS 2　:first-line

メモ: CSS3 では疑似クラスと疑似要素を見分けやすくするために、 ::first-line の表記法（ダブルコロン）が導入されたブラウザーでは CSS2 で導入された :first-line も使用できます。

フォントに関する全プロパティ: font, font-kerning, font-style, font-variant, font-variant-numeric, font-variant-position, font-variant-east-asian, font-variant-caps, font-variant-alternates, font-variant-ligatures, font-synthesis, font-feature-settings, font-language-override, font-weight, font-size, font-size-adjust, font-stretch, font-family
背景に関する全プロパティ: background-color, background-clip, background-image, background-origin, background-position, background-repeat, background-size, background-attachment, and background-blend-mode
color プロパティ
word-spacing, letter-spacing, text-decoration, text-transform, line-height
text-shadow, text-decoration, text-decoration-color, text-decoration-line, text-decoration-style, vertical-align

サポートするデスクトップブラウザ対応・互換性

Property	Desktop 互換性
::first-line	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
基本サポート	フルサポート◯1	フルサポート◯あり	フルサポート◯1	フルサポート◯9	フルサポート◯7	フルサポート◯1

サポートするモバイルブラウザ対応・互換性

Property	Mobile 互換性
::first-line	Android	Chrome for Android	Edge Mobile	Firefox for Android	Opera for Android	iOS Safari	Samsung Internet
基本サポート	フルサポート◯あり	不明	フルサポート◯あり	フルサポート◯4	不明	不明	不明

：::first-line 疑似要素 関連記事

CSS ::first-line 疑似要素| CSS:スタイルシート関数要素使い方・書き方例 CSS サンプル — CSS ::first-line 疑似要素 | CSS プロパティ値| 意味使い方実例 – WebRef

タグ:

#CSS プロパティ
#CSS 疑似要素