演習課題「ダイナミック擬似クラスを試してみよう」
現在、ダイナミック擬似クラスを使ってCSSのルールを適用しようとしています。:hover擬似クラスを使い、h1要素にカーソルを重ねることで、文字色が#ffffd4、背景色が#f5a1b3になるように変更してください。
採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです！
※コードの2行目以降に@charset "UTF-8";が記述されていると、左側に×と表示されることがあります。これは本来@charset "UTF-8";を1行目に記述すべきだと知らせているものです。採点には問題ありませんが、ブラウザによってはCSSが正しく表示されないことがあるため1行目に記述するとよいでしょう。
＃07:ダイナミック擬似クラス
このチャプターでは、ダイナミック擬似クラスについて学習します。
ダイナミック擬似クラスは、要素にカーソルが重ねられた状態など、HTMLの構文規則と関わりのない状態にある要素を選択するために利用します。
また、ダイナミック擬似クラスは、セレクタの後に直接記述することで適用できるようになります。
主なダイナミック擬似クラスとして、
・未訪問であるリンクのスタイルを指定する:link擬似クラス
・訪問済みであるリンクのスタイルを指定する:visited擬似クラス
・カーソルが乗ってクリックはされていない状態のスタイルを指定する:hover擬似クラス
・クリックされてからアクセスされるまでの状態のスタイルを指定する:active擬似クラス
があります。
MDN web docs
https://developer.mozilla.org/ja/docs/Web/CSS/Pseudo-classes
@charset "UTF-8";
a {font-size: 36px;}
a:hover {
background-color: blue;
color: white;
}