:where()

/* 問題1. li要素の中でクラスlist1かつlist2に対して、太字にし、文字色を#da1010に指定してください */
li:where(.list1, .list2) {
  font-weight: bold;
  color: #da1010;
}

/* 問題2. li要素の中でクラスlist2に対して、文字色を#008000で指定して上書きしてください */
li.list2 {
  color: #008000;
}


/* 問題1. li要素の中でクラスlist1かつlist2に対して、太字にし、文字色を#da1010に指定してください */

/* 問題2. li要素の中でクラスlist2に対して、文字色を#008000で指定して上書きしてください */


where()で特定の要素のスタイリングをしよう

:nth-child()

color

nth-childを使って、特定の要素のみ変化させよう

nth-childを使って、奇数・偶数の要素をそれぞれ変化させよう

nth-childを使って、特定の倍数の要素のみ変化させよう

background-color

【演習】nth-childを使って、リスト部分の装飾をしよう。

:first-child, :last-child

border-[上下左右]

最初か最後の要素のみスタイルを適用しよう

:not()

特定の要素に一致しない場合のみスタイルを適用しよう

:has()

擬似クラスで特定の要素を含む場合にスタイルを適用しよう

:is()

border

is()でまとめてスタイリングしよう

【総合演習】擬似クラスを使用してプロフィールを作成しよう

CSS擬似クラスに焦点を当て、ユーザーのアクションに応じたスタイル変更を適用する方法を解説します。
詳細なセレクターや条件に基づくスタイリングが学べます。

「擬似クラスの使い方を学ぼう」レッスンの総復習クイズです。