Caution

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

CSS辞典

トップページ
CSS辞典
【CSSセレクタ】E:checked

【CSSセレクタ】E:checked

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

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

サンプルコード

style.css

/* チェックが入った場合の隣接要素のスタイル */
input:checked + p { color: red;}

/* チェックボックスにチェックが入っているときのラベルスタイル */
input[type="checkbox"]:checked + label { font-weight: bold; color: #27ae60;}

/* ラジオボタンが選択されているときのラベルスタイル */
input[type="radio"]:checked + label { color: #2980b9; text-decoration: underline;}

/* カスタムチェックボックスの実装例（チェック時に背景色を変える） */
input[type="checkbox"]:checked ~ .option-label { background-color: #dff0d8;}

ブラウザでの表示結果

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