演習課題「:checked擬似クラスを使ってみよう」
現在、ブラウザでは、あるデザイン事務所のプロジェクトを管理するためのページが表示されており、そこには常に「本案件は緊急です」と書かれています。
ここで、CSSの:checked擬似クラスを使用してstyle01.cssに適切なコードを補完することによって、「緊急案件」のチェックを入れたときにだけ「本案件は緊急です」というメッセージが表示されるように修正してください。
なお、「緊急案件」のチェックボックスにはis_emergencyというIDが割り当てられています。
採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです！
※コードの2行目以降に@charset "UTF-8";が記述されていると、左側に×と表示されることがあります。これは本来@charset "UTF-8";を1行目に記述すべきだと知らせているものです。採点には問題ありませんが、ブラウザによってはCSSが正しく表示されないことがあるため1行目に記述するとよいでしょう。
＃07::checked擬似クラス
このチャプターでは、:checked擬似クラスについて学習します。
CSSの:checked擬似クラスは、チェックボックス (<input type="checkbox">) やラジオボタン (<input type="radio">) 、option要素などが「選択された」状態にあるときにスタイルを適用するためのセレクタです。
ユーザーが項目を選択した際に、その要素や関連するラベルの見た目を動的に変更することができます。例えば、選択されたラジオボタンに関連するラベルの文字色を変えたり、背景色を変更したりするのに利用されます。
セレクタの部分で警告が表示されますが、実行上は問題ありません。@charset "UTF-8";
input[type="radio"]#blue:checked ~ p{background-color:blue;}
input[type="radio"]#red:checked ~ p{background-color:red;}
MDN web docs - :checked
https://developer.mozilla.org/ja/docs/Web/CSS/:checked