Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

CSSプロパティ辞典

  1. トップページ
  2. CSSプロパティ辞典
  3. 【CSSセレクタ】E:checked

【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>

対応ブラウザ
IE6 IE7 IE8 IE9 IE10 IE11 Safari Chrome Firefox Opera

iPhone Safari Android2系 標準ブラウザ Android4系 標準ブラウザ

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。