:checked

チェックド（セレクタ）

意味フォーム要素が選択されている状態

:checkedとは？

:checkedは、チェックボックスやラジオボタンなどのフォーム要素が選択されている（チェックされている）状態に特定のスタイルを適用するために使用する疑似クラスです。ユーザーが選択した項目を視覚的に強調表示する際に役立ちます。

:checkedの具体的な使い方

チェックされたチェックボックスのスタイリング例

<style>
    input[type='checkbox']:checked + label::before {
        background-color: blue;
    }
</style>
<label>
    <input type='checkbox' checked>
    <span>チェックされている</span>
</label>

チェックボックスがチェックされている場合に、カスタムチェックボックスの背景色を青に変更します。これにより、チェック状態が視覚的に明確になります。

選択されたラジオボタンのラベルスタイリング例

<style>
    input[type='radio']:checked + label {
        font-weight: bold;
    }
</style>

<input type='radio' id='option1' name='options' checked>
<label for='option1'>選択されたオプション</label>

<input type='radio' id='option2' name='options'>
<label for='option2'>未選択のオプション</label>

ラジオボタンが選択されている場合に、関連するラベルを太字にします。この例では、2つのオプションを表示し、1つ目が選択された状態になっています。

:checkedに関するよくある質問

Q. :checkedはどの要素に使えますか？

A. :checkedは主にチェックボックス（<input type='checkbox'>）とラジオボタン（<input type='radio'>）に使用されます。これらの要素が選択されている状態を指定します。

Q. :checkedの使用例を教えてください

A. 一般的な使用例は、選択された項目のスタイルを変更することです。例えば、「input:checked + label { color: blue; }」とすると、チェックされた項目のラベルを青色にできます。

Q. :checkedと属性セレクタの違いは？

A. :checkedは動的な状態を選択する疑似クラスです。一方、[checked]属性セレクタは初期状態でチェックされている要素を選択します。:checkedはユーザーの操作に応じて動的に適用されるため、よりインタラクティブな設計に適しています。

:checkedが学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、CSSの:checkedや[attr*=value]、[attr|=value]、~、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。