TECH I.S.

CSSの擬似要素とは?beforeやmarkerなどよく使われる擬似要素についても解説


疑似要素とは

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

たとえば、次の目的で使用できます。

  • 要素の最初の文字または行のスタイルを設定する
  • 要素のコンテンツの前後にコンテンツを挿入する

構文

疑似要素の構文:

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

::first-line疑似要素

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

次の例では、すべての<p>要素でテキストの最初の行をフォーマットします。

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

自分で試してみる»

ノート:::first-line疑似要素は、ブロックレベルの要素にのみ適用できます。

::first-line疑似要素には、次のプロパティが適用されます。
  • fontプロパティ
  • colorプロパティ
  • backgroundプロパティ
  • 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疑似要素には、次のプロパティが適用されます。

  • fontプロパティ
  • colorプロパティ
  • backgroundプロパティ
  • marginプロパティ
  • paddingプロパティ
  • borderプロパティ
  • text-decoration
  • vertical-align("float"が"none" の場合のみ)
  • text-transform
  • line-height
  • float
  • clear

疑似要素とHTMLクラス

疑似要素は、HTMLクラスと組み合わせることができます。

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

自分で試してみる»

上記の例では、class="intro"を含む段落の最初の文字が赤色の大きなサイズで表示されます。


複数の疑似要素

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

次の例では、段落の最初の文字が赤色で、xxラージのフォントサイズになります。最初の行の残りは青色で、スモールキャピタルになります。段落の残りの部分は、デフォルトのフォントサイズと色になります。

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 - ::marker疑似要素

::marker疑似要素は、リスト項目のマーカーを選択します。

次の例では、リストアイテムのマーカーのスタイルを設定します。

::marker {   color: red;   font-size: 23px; }

自分で試してみる»


CSS - ::selection疑似要素

::selection疑似要素は、ユーザーが選択した要素の部分と一致します。

次のCSSプロパティを適用できます。::selection:colorbackgroundcursor、 と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>要素の最初の行を選択します
::marker ::marker リスト項目のマーカーを選択します
::selection p::selection ユーザーが選択した要素の部分を選択します

すべてのCSS疑似クラス

セレクタ

例の説明

:active a:active アクティブなリンクを選択します
:checked input:checked チェックされたすべての<input>要素を選択します
:disabled input:disabled 無効なすべての<input>要素を選択します
:empty p:空 子を持たないすべての<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) 「it」で始まるlang属性値を持つすべての<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 「:read-only」属性が指定された<input>要素を選択します
:read-write input:read-write 「:read-only」属性のない<input>要素を選択します
:required input:required 「:required」属性が指定された<input>要素を選択します
:root :root ドキュメントのルート要素を選択します
:target #news:target 現在アクティブな#news要素を選択します (そのアンカー名を含むURLをクリック)
:valid input:valid 有効な値を持つすべての<input>要素を選択します
:visited a:visited 訪問したすべてのリンクを選択します


プログラミング学習を加速させる

プログラミングをプロの講師に教えてもらいませんか。

テックアイエスのプログラミングスクールは初心者も大歓迎です。年齢制限もありません。転職・副業に強く、挫折させない手厚いサポートで稼ぐ力を身につけましょう!

スクールの詳細