CSSセレクター

チェックされている要素のスタイル設定する - Checked疑似クラス

例1

コード

以下のコードを記述します。

CheckedSelector.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title></title>
  <link rel="stylesheet" type="text/css" href="CheckedSelector.css" />
</head>
<body>
  <input id="CheckBox" class="chkbox" type="checkbox" />
  <label for="CheckBox">チェックボックスです</label>
</body>
</html>

CheckedSelector.css

input.chkbox{
  background-color:#b6ff00;
}

input.chkbox:checked{
  background-color:#ff6a00;
}

解説

"input.chkbox"にてchkboxクラスのinputタグの要素のスタイルを設定できます。上記のコードでは背景色を黄緑色に設定しています。
"input.chkbox:checked"にてチェックボックスがチェックされた状態のchkboxクラスのinputタグの要素のスタイルを設定しています。上記のコードでは背景色をオレンジに変更しています。

実行結果

HTMLファイルを表示します。下図の画面が表示されます。チェックボックスがチェックされていない状態では背景色が黄緑色になっています。
チェックされている要素のスタイル設定する - Checked疑似クラス:画像1

チェックボックスにチェックをつけるとチェックボックスの背景色がオレンジに変化します。

例2

コード

以下のコードを記述します。

CheckedSelector.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title></title>
  <link rel="stylesheet" type="text/css" href="CheckedSelector.css" />
</head>
<body>
  <input id="CheckBox1" class="checkbox" type="checkbox" />
  <label for="CheckBox1">チェックボックスです</label>
</body>
</html>

CheckedSelector.css

input.checkbox + label {
  color:#008000;
}

input.checkbox:checked + label {
  color:#000080;
  text-decoration:underline;
}

解説

"input.checkbox + label"にて"checkbox"クラスのinputタグに隣接するlabelタグのスタイルを設定できます"+"は隣接セレクターです。隣接セレクターの詳細についてはこちらの記事を参照してください。

"input.checkbox:checked + label"にてチェックボックスがチェックされた場合の "checkbox"のクラスのinputタグに隣接するlabelタグのスタイルを設定できます。

実行結果

HTMLファイルを表示します。下図の画面が表示されます。チェックボックスがチェックされていない状態ではラベルは緑色です。
チェックされている要素のスタイル設定する - Checked疑似クラス:画像3

チェックボックスにチェックをつけるとラベルのスタイルが変化します。文字色が青になり下線が付きます。

Checked疑似クラスを用いてチェック状態と未チェック状態のスタイルを変更することができました。