【CSS】擬似要素 - 要素部分のセレクター

CSSの擬似要素について解説します。

検証環境

CSS

macOS

14.1

擬似要素

擬似要素は“要素の特定部分を表すセレクター”です。

基本構文

::擬似要素 {
    プロパティ名: プロパティ値;
}

サンプル

最初の文字を表す擬似要素はfirst-letterです。

この擬似要素を使って具体例を示します。

sample.html

<style>
___ih_hl_start
p::first-letter {
___ih_hl_end
    color: red;
}
</style>

<p>CSSの正式名称はCascading Style Sheetsです。セレクターやプロパティを定義し、ブラウザ表示のレイアウトや見た目を定義します。</p>

プレビュー

２行目のが擬似要素を使ったセレクターです。

このセレクターは『p要素の最初の１文字目』を意味します。

テキストカラーを赤色にするスタイルを定義しており、プレビューから１文字目だけが赤色になっていることが確認できます。

代表的な擬似要素

擬似要素には様々な種類があります。

代表的な擬似要素は次の通りです。

擬似要素	説明
before	beforeは最初の擬似的な子要素です。
after	afterは最後の擬似的な子要素です。
first-letter	first-letterは最初の文字です。
first-line	first-lineは最初の行です。
marker	markerはリストの箇条記号です。
placeholder	placeholderはプレイスホルダーの文字列です。
selection	selectionは選択したテキストです。