Caution

お使いのブラウザはJavaScriptが無効になっております。
当サイトでは検索などの処理にJavaScriptを使用しています。
より快適にご利用頂くため、JavaScriptを有効にしたうえで当サイトを閲覧することをお勧めいたします。

CSS辞典

【CSSセレクタ】E:checked

『セレクタ:checked』で、チェックが入っている要素に適用でき、こちらは一般に『状態擬似クラス』と呼ばれます。IE8以下のブラウザでは動きません。

チェックが入っている要素に適用されるものなので、使用されるのは主に『<input type="checkbox">』(チェックボックス)か『<input type="radio">』(ラジオボタン)となります。

input:checked + p { color: red;} /* チェックが入った場合の弟要素のp要素を赤字にします。 */

input:checked + p { color: red;} /* チェックが入った場合の弟要素のp要素を赤字にします。 */

<input type="checkbox">
<p>チェックが入ると色が変わります。</p>
<input type="radio">
<p>チェックが入ると色が変わります。</p>

デスクトップ

Chrome

1 以降 ○

Firefox

1 以降 ○

Safari

3.1 以降 ○

2 以前 ×

Edge

12 以降 ○

全バージョンで対応しています

11 ○

10 ○

9 ○

8 ×

7 ×

6 ×

Opera

9 以降 ○

8 以前 ×

モバイル

iOS Safari

2 以降 ○

1 以前 ×

Android Browser

2 以降 ○

Chrome Android