CSS疑似要素

疑似要素とは？

CSSの疑似要素は要素の特定の部分をスタイル付けするために使用されます。

::first-line 疑似要素

::first-line 疑似要素はテキストの最初の行に特別なスタイルを追加します。

p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}

注意：::first-line 疑似要素はブロックレベル要素にのみ適用できます。

::first-line 疑似要素には以下のプロパティが適用されます：

• フォントプロパティ
• カラープロパティ
• 背景プロパティ
• ワードスペーシング
• レタースペーシング
• テキスト装飾
• 垂直方向の配置
• テキスト変形
• 行の高さ
• クリア

疑似要素の記法はダブルコロン (::) を使います – ::first-line のように。

CSS3で、疑似クラスと疑似要素を区別するために、W3Cはシングルコロンの代わりにダブルコロンの記法を導入しました。CSS2とCSS1では、疑似クラスと疑似要素の両方にシングルコロンの記法が使用されていました。

::first-letter 疑似要素

::first-letter 疑似要素はテキストの最初の文字に特別なスタイルを追加します。

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

注意：::first-letter 疑似要素はブロックレベル要素にのみ適用できます。

::first-letter 疑似要素には以下のプロパティが適用されます：

• フォントプロパティ
• カラープロパティ
• 背景プロパティ
• マージンプロパティ
• パディングプロパティ
• ボーダープロパティ
• テキスト装飾
• 垂直方向の配置（”float”が”none”の場合のみ）
• テキスト変形
• 行の高さ
• フロート
• クリア

疑似要素とHTMLクラスの組み合わせ：

/* .intro クラスを持つ段落の最初の文字にスタイルを適用 */
p.intro::first-letter {
  color: #ff0000;
  font-size: 200%;
}

複数の疑似要素の組み合わせ

複数の疑似要素を組み合わせて使用することもできます。

/* 段落の最初の文字を赤く、xx-largeのフォントサイズにします */
p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

/* 段落の最初の行を青く、small-capsのフォント変種にします */
p::first-line {
  color: #0000ff;
  font-variant: small-caps;
}

::before 疑似要素

::before 疑似要素は要素の内容の前に何かを挿入するために使用されます。

/* 各 
 要素の内容の前に画像を挿入します */
h1::before {
  content: url(smiley.gif);
}

::after 疑似要素

::after 疑似要素は要素の内容の後に何かを挿入するために使用されます。

/* 各 
 要素の内容の後に画像を挿入します */
h1::after {
  content: url(smiley.gif);
}

::marker 疑似要素

::marker 疑似要素はリストアイテムのマーカーを選択します。

/* リストアイテムのマーカーを赤く、23pxのフォントサイズにします */
::marker {
  color: red;
  font-size: 23px;
}

::selection 疑似要素

::selection 疑似要素はユーザーによって選択された要素の部分にマッチします。

::selection に適用できるCSSプロパティ：color、background、cursor、outline。

/* 選択されたテキストを赤色で、黄色の背景色にします */
::selection {
  color: red;
  background: yellow;
}

すべてのCSS疑似要素

疑似要素	例	例の説明
::after	p::after	各 要素の内容の後に何かを挿入します
::before	p::before	各 要素の内容の前に何かを挿入します
::first-letter	p::first-letter	各 要素の最初の文字を選択します
::first-line	p::first-line	各 要素の最初の行を選択します
::marker	::marker	リストアイテムのマーカーを選択します
::selection	p::selection	ユーザーによって選択された要素の部分を選択します