CSSの:checked疑似クラスを使った要素のスタイリング方法

チェックボックスのスタイリング: :checked疑似クラスを使用して、チェックボックスがチェックされた状態と非チェック状態で異なるスタイルを適用することができます。以下は例です。

input[type="checkbox"]:checked {
  /* チェックされた状態のスタイル */
  color: red;
}
input[type="checkbox"]:not(:checked) {
  /* 非チェック状態のスタイル */
  color: blue;
}

ラジオボタンのスタイリング: 同様に、ラジオボタンも:checked疑似クラスを使用してスタイルを適用することができます。以下は例です。

input[type="radio"]:checked {
  /* 選択された状態のスタイル */
  background-color: yellow;
}
input[type="radio"]:not(:checked) {
  /* 未選択状態のスタイル */
  background-color: gray;
}

メニューやアコーディオンのスタイリング: :checked疑似クラスを利用することで、メニューやアコーディオンなどの要素を開閉する際のスタイル変更も可能です。以下は例です。

.menu-content {
  display: none;
}
.menu-toggle:checked + .menu-content {
  display: block;
}

上記の例では、.menu-toggleクラスのチェックボックスがチェックされた場合に、隣接する.menu-contentクラスの要素が表示されるようになります。

以上が、CSSの:checked疑似クラスを使用した要素のスタイリング方法の一部です。これらの例を参考にしながら、さまざまな要素に対して:checked疑似クラスを活用してみてください。