CSS 擬似クラス

❮ 前章へ 次章へ ❯

擬似クラスとは？

擬似クラスは、要素の特別な状態を定義するために使用します。

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

Mouse Over Me

構文

擬似クラスの構文：

selector:pseudo-class {
    property:value;
}

アンカー擬似クラス

リンクは、いろいろな方法で表示することができます：

例

/* unvisited link */
a:link {
    color: #FF0000;
}

/* visited link */
a:visited {
    color: #00FF00;
}

/* mouse over link */
a:hover {
    color: #FF00FF;
}

/* selected link */
a:active {
    color: #0000FF;
}
Try it Yourself ❯
Note 注: a:hover は、CSS の定義において、a:link と a:visited の後に来なければ効果は出ません！ a:active は、CSS の定義において、a:hover の後に来なければ効果は出ません！ 擬似クラス名は、大文字と小文字を区別しません。

擬似クラスと CSS クラス

擬似クラスは CSS クラスと結合できます:

リンクの上にマウスを乗せると色が変化します：

例

a.highlight:hover {
    color: #ff0000;
}
Try it Yourself ❯

<div> 上にホバー

<div> 要素上に :hover 擬似クラスをする例：

例

div:hover {
    background-color: blue;
}
Try it Yourself ❯

CSS - :first-child 擬似クラス

:first-child 擬似クラスは、他要素の最初の子である指定した要素とマッチします。

最初の <p> 要素にマッチ

下の例では、セレクタは全要素の最初の子である全ての <p> 要素にマッチします:

例

p:first-child {
    color: blue;
}
Try it Yourself ❯

全 <p> 要素の最初の <i> 要素にマッチ

下の例では、セレクタは全 <p> 要素の最初の <i> 要素にマッチします:

例

p i:first-child {
    color: blue;
}
Try it Yourself ❯

全体で最初の子要素が <p> であるの全 <i> 要素にマッチ

下の例で、セレクタは全体で最初の子要素である <p> 要素内のすべての <i> 要素にマッチします：

例

p:first-child i {
    color: blue;
}
Try it Yourself ❯

CSS - :lang 擬似クラス

:lang 擬似クラスは、いろいろな言語に指定の規則を定義することを可能にします。

下の例は、:lang クラスにより lang="no" を持つ <q> 要素に対する引用符を定義します:

例

<html>
<head>
<style>
q:lang(no) {
    quotes: "~" "~";
}
</style>
</head>

<body>
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
</body>
</html>
Try it Yourself ❯
Examples

その他の例

ハイパーリンクへ異なるスタイルを追加する
この例は、ハイパーリンクへ他のスタイルを追加する方法のデモです。

:focus の使用
この例は、:focus 擬似クラスの使用方法のデモです。

練習問題で確認テスト！

Exercise 1 ❯  Exercise 2 ❯  Exercise 3 ❯  Exercise 4 ❯

全 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) "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 すべての既読リンクを選択する

全 CSS 疑似要素

セレクタ 例 例の説明
::after p::after 全ての <p> 要素の後にコンテンツを挿入する
::before p::before 全ての <p> 要素の前にコンテンツを挿入する
::first-letter p::first-letter 全 <p> 要素の先頭文字を選択する
::first-line p::first-line 全 <p> 要素の先頭行を選択する
::selection p::selection ユーザによって選択された要素の一部を選択する

❮ 前章へ 次章へ ❯