CSS 伪要素

仮要素とは何ですか？

CSS 仮要素は要素の指定部分のスタイルを設定するために使用されます。

例えば、以下に使用できます：

  • 要素の最初の文字、最初の行のスタイルを設定する
  • 要素の内容の前にまたは後に内容を挿入する

構文

仮要素の構文：

selector::pseudo-element {
  property: value;
}

::first-line 仮要素

::first-line 仮要素はテキストの最初の行に特別なスタイルを追加するために使用されます。

以下の例では、すべての <p> 要素の最初の行にスタイルを追加します：

例

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

自分で試してみてください

注意：::first-line 仮要素はブロック要素にのみ適用されます。

以下の属性に適用されます： ::first-line 仮要素：

  • フォント属性
  • 色属性
  • 背景属性
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • clear

ご注意くださいダブルコロン記法 - ::first-line 対比 :first-line

CSS3 では、ダブルコロンが仮要素の単一のコロン記法を置き換えます。これは W3C が区別しようと試みたものです。仮類および仮要素の試み。

CSS2 と CSS1 では、仮類と仮要素はすべて単一のコロン記法を使用します。

後方互換性のために、CSS2 と CSS1 仮要素は単一のコロン記法を受け入れます。

::first-letter 仮要素

::first-letter 仮要素はテキストの最初の文字に特別なスタイルを追加するために使用されます。

以下の例では、すべての <p> 要素のテキストの最初の文字のフォーマットを設定します：

例

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

自分で試してみてください

注意：::first-letter 仮要素はブロック要素にのみ適用されます。

以下の属性は ::first-letter 仮要素に適用されます：

  • フォント属性
  • 色属性
  • 背景属性
  • 外枠属性
  • 内枠属性
  • 枠線属性
  • text-decoration
  • vertical-align（floatが"none"のときのみ）
  • text-transform
  • line-height
  • float
  • clear

仮要素と CSS クラス

仮要素は CSS クラスと組み合わせて使用できます：

例

p.intro::first-letter {
  color: #ff0000;
  font-size: 200%;
}

自分で試してみてください

上記の例では、class="intro"の段落の先頭文字が赤色で大きいフォントで表示されます。

複数の仮要素

複数の仮要素を組み合わせることもできます。

以下の例では、段落の最初の文字は赤色で、フォントサイズは xx-large になります。第一行の残りは青色になり、小型大文字を使用します。この段落の残りはデフォルトのフォントサイズと色になります：

例

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}
p::first-line {
  color: #0000ff;
  font-variant: small-caps;
}

自分で試してみてください

CSS - ::before 仮要素

::before 仮要素は、要素の内容の前にいくつかの内容を挿入するために使用できます。

以下の例では、各<h1>要素の内容の前に画像を挿入します：

例

h1::before {
  content: url(smiley.gif);
}

自分で試してみてください

CSS - ::after 仮要素

::after 仮要素は、要素の内容の後にいくつかの内容を挿入するために使用できます。

以下の例では、各<h1>要素の内容の後に画像を挿入します：

例

h1::after {
  content: url(smiley.gif);
}

自分で試してみてください

CSS - ::selection 仮要素

::selection 仮要素は、ユーザーが選択した要素の一部に一致するように設定できます。

以下の CSS 属性は、仮要素に適用できます ::selection:

  • color
  • background
  • cursor
  • outline

以下の例では、選択されたテキストが黄色の背景上で赤色で表示されます：

例

::selection {
  color: red; 
  background: yellow;
}

自分で試してみてください

すべての CSS 仮要素

選択子 例 例の説明
::after p::after 各<p>要素の後に内容を挿入。
::before p::before 各<p>要素の前に内容を挿入。
::first-letter p::first-letter 各<p>要素の先頭文字を選択。
::first-line p::first-line 各<p>要素の先頭行を選択。
::selection p::selection ユーザーが選択した要素の一部を選択します。

全てのCSS仮類

選択子 例 例の説明
:active a:active アクティブなリンクを選択します。
:checked input:checked 選択された各<input>要素を選択します。
:disabled input:disabled 無効な<input>要素を選択します。
:empty p:empty 子要素を持たない各<p>要素を選択します。
:enabled input:enabled 全ての有効な<input>要素を選択します。
:first-child p:first-child 親の最初の子要素である各<p>要素を選択します。
:first-of-type p:first-of-type 親の最初の<p>要素である各<p>要素を選択します。
:focus input:focus 焦点を当てた<input>要素を選択します。
:hover a:hover マウスが乗っているリンクを選択します。
:in-range input:in-range 指定範囲内の値を持つ<input>要素を選択します。
:invalid input:invalid 無効な値を持つ全ての<input>要素を選択します。
:lang(language) p:lang(it) lang属性の値が"it"で始まる各<p>要素を選択します。
:last-child p:last-child 親の最後の子要素である各<p>要素を選択します。
:last-of-type p:last-of-type 親の最後の<p>要素である各<p>要素を選択します。
:link a:link 全ての未訪問のリンクを選択します。
:not(selector) :not(p) 各非<p>要素の要素を選択します。
:nth-child(n) p:nth-child(2) 親の2番目の子要素である各<p>要素を選択します。
:nth-last-child(n) p:nth-last-child(2) 選択するのは、最後の子要素から数えて2番目の親の子要素である<p>要素の各要素。
:nth-last-of-type(n) p:nth-last-of-type(2) 親の第2 <p> 元素として選択される各 <p> 元素を選択、最後の子要素からカウントします。
:nth-of-type(n) p:nth-of-type(2) 親の第2 <p> 元素として選択される各 <p> 元素を選択。
:only-of-type p:only-of-type 親の唯一の <p> 元素として選択される各 <p> 元素を選択。
:only-child p:only-child 親の唯一の子要素として選択される <p> 元素を選択。
:optional input:optional 属性 "required" を持たない <input> 元素を選択。
:out-of-range input:out-of-range 指定された範囲外の値を持つ <input> 元素を選択。
:read-only input:read-only 属性 "readonly" が指定された <input> 元素を選択。
:read-write input:read-write 属性 "readonly" を持たない <input> 元素を選択。
:required input:required 属性 "required" が指定された <input> 元素を選択。
:root root 要素のルート要素を選択。
:target #news:target 現在アクティブな #news 元素を選択（指定されたアンカー名を含む URL をクリックします）。
:valid input:valid 全ての有効な値を持つ <input> 元素を選択。
:visited a:visited 全ての訪問したリンクを選択。