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

CSSの擬似要素についてご紹介します。

擬似要素

擬似要素はセレクターにおいて、要素の部分を示すキーワードです。

基本構文

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

例

最初の文字を表わすfirst-letterを使用します。

この例ではp要素の最初の文字『C』にスタイルを適用しています。

<style>
p::first-letter {
    color: red;
    font-size: 36px;
}
</style>

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

代表的な擬似要素

擬似要素は様々な種類があります。
ここでは一般的によく使われる代表的な擬似要素をご紹介します。

before

beforeは最初の子要素です。
詳しくは次の記事をご覧ください。

【CSS】::before（擬似要素） - 最初の子要素

after

afterは最後の子要素です。
詳しくは次の記事をご覧ください。

【CSS】::after（擬似要素） - 最後の子要素

first-letter

first-letterは最初の文字です。
詳しくは次の記事をご覧ください。

【CSS】::first-letter（擬似要素） - 最初の文字

first-line

first-lineは最初の行です。
詳しくは次の記事をご覧ください。

【CSS】::first-line（擬似要素） - 最初の行

marker

markerはリストの箇条記号です。
詳しくは次の記事をご覧ください。

【CSS】::marker（擬似要素） - リストのマーカー

placeholder

placeholderはプレイスホルダーの文字列です。
詳しくは次の記事をご覧ください。

【CSS】::placeholder（擬似要素） - プレイスホルダー

selection

selectionは選択したテキストです。
詳しくは次の記事をご覧ください。

【CSS】::selection（擬似要素） - 選択範囲