* {
  text-align: center;
  list-style-type: none;
  padding: 0;
}

ul:first-child {
  margin-bottom: 20px;
}

li {
  display: inline-block;
  padding: 5px;
}

/* 問題1. li要素の中でクラスlist1もしくはクラスlist3にあてはまる要素に対して、文字色を#ffffff、背景色を#000000に指定してください */
li:is(.list1, .list3) {
  color: #ffffff;
  background-color: #000000;
}

/* 問題2. li要素に含まれるクラスlist5もしくはクラスlist6に対して、太さ1px、実線、色は#000000のボーダーを指定してください */
li:is(.list5, .list6) {
  border: 1px solid #000000;
}


:is()

border

* {
  text-align: center;
  list-style-type: none;
  padding: 0;
}

ul:first-child {
  margin-bottom: 20px;
}

li {
  display: inline-block;
  padding: 5px;
}

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

/* 問題2. li要素の中でクラスlist5かつlist6に対して、太さ1px、実線、色は#000000のボーダーを指定してください */


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

:nth-child()

color

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

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

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

background-color

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

:first-child, :last-child

border-[上下左右]

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

:not()

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

:has()

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

:where()

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

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

HTML&CSSのレイアウト作成に欠かせないタグについて学んでいきます。

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

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

まずは必要なスキルを確認しましょう！