CSS 疑似要素

❮ 前章へ 次章へ ❯

擬似要素とは？

CSS 擬似要素は、指定した要素の一部をスタイルするために使用します。

例えば、次のようなことに使用できます：

構文

擬似要素の構文：

selector::pseudo-element {
    property:value;
}
Note 2 重コロン表記に注意してください - ::first-line 対 :first-line

CSS3 における擬似要素のシングルコロン表記は、ダブルコロン表記に置き換えられました。 これは、擬似クラスと擬似要素を区別するための W3C による試みでした。

シングルコロン構文は、 CSS2 と CSS1 において擬似クラスと擬似要素の両方に使われていました。

後方互換のため、シングルコロン構文は CSS2 と CSS1 の擬似要素に対して使用できます。

::first-line 擬似要素

::first-line 擬似要素は、テキストの先頭行に特別なスタイルを加えるために使用します。

次の例は、全 <p> におけるテキストの先頭行をフォーマットしています：

例 

p::first-line {
    color: #ff0000;
    font-variant: small-caps;
}
Try it Yourself ❯

注: ::first-line 擬似要素は、ブロックレベル要素にのみ適用することができます。

次のプロパティは、::first-line 擬似要素に適用されます：

::first-letter 擬似要素

::first-letter は、テキストの先頭文字に特別なスタイルを加えるために使用します:

次の例は、全 <p> におけるテキストの先頭文字をフォーマットしています：

例

p::first-letter {
    color: #ff0000;
    font-size: xx-large;
}
Try it Yourself ❯

注: ::first-letter 擬似要素は、ブロックレベル要素にのみ適用されます。

次のプロパティは、::first-letter 擬似要素に適用されます：

擬似要素と CSS クラス

擬似要素を CSS クラスに結合できます: 

例

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

上の例は、class="intro" を持つ全ての段落の先頭文字を、赤色で大きな（larger）サイズで表示します。

複数の擬似要素

複数の擬似要素の結合もできます。

次の例は、段落の先頭文字を赤色でフォントサイズ xx-large で表示します。 先頭行のそれ以外の文字は、青色の small-caps で表示します。 先頭行以外の段落は、デフォルトのフォントサイズと色で表示します:

例

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

p::first-line {
    color: #0000ff;
    font-variant: small-caps;
}
Try it Yourself ❯

CSS - ::before 擬似要素

::before 擬似要素は、要素のコンテンツの前にコンテンツを挿入するために使用することができます。

次の例は、<h1> 要素のコンテンツの前に画像を挿入します:

例

h1::before {
    content: url(smiley.gif);
}
Try it Yourself ❯

CSS - ::after 擬似要素

::after 擬似要素は、要素のコンテンツの後にコンテンツを挿入するために使用することができます。

次の例は、<h1> 要素のコンテンツの後に画像を挿入します:

例

h1::after {
    content: url(smiley.gif);
}
Try it Yourself ❯

CSS - ::selection 擬似要素

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

次の CSS プロパティは ::selection に適用することができます：color、 background、cursor、outline。

次の例は、選択したテキストの文字色を赤に、背景色を黄色にします：

例

::selection {
    color: red;
    background: yellow;
}
Try it Yourself ❯

練習問題で確認テスト！

Exercise 1 ❯  Exercise 2 ❯  Exercise 3 ❯

全 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 disabled 指定の全 <input> 要素を選択する
:empty p:empty S子を持たない全 <p> 要素を選択する
:enabled input:enabled 有効な（訳注：disabled 以外？）の全 <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> 要素が 1 つしかない <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 （アンカー名を含む URL をクリックした）現在のアクティブな #news 要素を選択する
:valid input:valid 妥当な値を持つ全 <input> 要素を選択する
:visited a:visited すべての既読リンクを選択する

❮ 前章へ 次章へ ❯