演習課題「構造擬似クラスを試してみよう」
現在、構造擬似クラスを使ってCSSのルールを適用しようとしています。-child擬似クラスを使い、最後のp要素だけ文字色を#6398d2に変化させてください。
採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです！
※コードの2行目以降に@charset "UTF-8";が記述されていると、左側に×と表示されることがあります。これは本来@charset "UTF-8";を1行目に記述すべきだと知らせているものです。採点には問題ありませんが、ブラウザによってはCSSが正しく表示されないことがあるため1行目に記述するとよいでしょう。
＃06:構造擬似クラス
このチャプターでは、構造擬似クラスについて学習します。
擬似クラスとはセレクタに付加するキーワードであり、選択された特定の要素が特定の状態にあるときに適用するクラスです。
MDN web docs
https://developer.mozilla.org/ja/docs/Web/CSS/Pseudo-classes
構造擬似クラスは、子要素の位置や繰り返しなどによって適用されるスタイルシートを動的に切り離すクラスです。
つまり、コードに存在する要素をカウントして、n番目の要素にだけCSSを適用するクラスになります。
この構造擬似クラスには、同一階層のすべての要素をカウントする-child擬似クラスと、特定の要素のみカウントする-of-type擬似クラスがあります。
主な適用先の指定方法として、
・最初からn番目の要素を指定する:nth-child(n)と:nth-of-type(n)
・最後からn番目の要素を指定する:nth-last-child(n)と:nth-last-of-type(n)
・最初の要素を指定する:first-childと:first-of-type
・最後の要素を指定する:last-childと:last-of-type
・唯一の要素を指定する:only-childと:only-of-type
があります。
また、構造擬似クラスのパラメータにはさまざまな書き方があり、それによって複数の要素に対応できるようになります。
例えば、AとBを定数とすると、それぞれ
・Aのような定数単体ならA番目の要素のみを指定
・Anであれば、Aの倍数番目の要素全てを指定
・n+Bであれば、B番目以降の要素を指定
・-n+Bであれば、B番目までの要素を指定
・oddとevenはそれぞれ奇数番目、偶数番目の要素を指定
となります。
MDN web docs
https://developer.mozilla.org/ja/docs/Web/CSS/Pseudo-classes#%E3%83%84%E3%83%AA%E3%83%BC%E6%A7%8B%E9%80%A0%E6%93%AC%E4%BC%BC%E3%82%AF%E3%83%A9%E3%82%B9
@charset "UTF-8";
p:last-child{color: red;}