演習課題「混合セレクタを試してみよう」
現在、混合セレクタを使ってCSSのルールを適用しようとしています。p要素のclass属性値がstudentであり、上から3番目までである要素の末尾にさんは生徒ですと表示されるよう変更してください。:nth-of-typeで指定する値としては-n+3を指定します。
採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです！
※コードの2行目以降に@charset "UTF-8";が記述されていると、左側に×と表示されることがあります。これは本来@charset "UTF-8";を1行目に記述すべきだと知らせているものです。採点には問題ありませんが、ブラウザによってはCSSが正しく表示されないことがあるため1行目に記述するとよいでしょう。
＃09:混合セレクタ
このチャプターでは、混合セレクタについて学習します。
混合セレクタは、適用先の要素を限定するために複数のセレクタや擬似クラスを用いて指定したセレクタで、セレクタ間にスペースを入れず、つなげて1つのセレクタとして記述します。
クラス名や擬似クラスは複数つなげて記述することができますが、要素名とすべての要素を指定するユニバーサルセレクタは最初に1つだけ記述することができます。
また、擬似要素は最後に1つだけ記述することができます。
MDN web docs
https://developer.mozilla.org/ja/docs/Web/CSS/Pseudo-classes#%E6%A7%8B%E6%96%87
p.programming-language:nth-of-type(2n)::after {content: " おすすめ!";}
と記述するとElement (p.programming-language:nth-of-type(2n)::after) is overqualified, just use .programming-language without element nameという警告が表示されます。
こちらは、p要素が過剰というような意味ですが、ここではp要素のclass属性値がprogramming-languageであり、偶数番目である要素の末尾に「おすすめ!」と表示されるようなCSSを記述することが目的のため無視して問題ありません。
@charset "UTF-8";
p.programming-language:nth-of-type(2n)::after {content: " おすすめ!";}