CSS入門 | CSSセレクター | 状態疑似クラス

要素状態疑似クラスを使用すると、入力フォームの状態に応じてそれぞれ別のスタイルを設定できる。

CSSで使用できる要素状態疑似クラスは次のとおりである。

疑似クラス	説明
`:checked`	checked状態のinput要素をすべて選択する。
`:enabled`	使用できるinput要素をすべて選択する。
`:disabled`	使用できないinput要素をすべて選択する。

`:checked`

:checkedはinput要素の中でchecked状態のinput要素を選択する。

<style>
    input { color: #FFEFD5; }
    input:checked + span { color: #CD853F; }
</style>

:enabledはinput要素の中で使用できるinput要素を選択する。また、:disabledはinput要素の中で使用できないinput要素を選択する。

<style>
    input { color: #FFEFD5; }
    input:disabled + span { color: #CD853F; }
</style>