:first-child, :last-child

color

border-[上下左右]

* {
  text-align: center;
  list-style-type: none;
  padding: 0;
  font-size: 20px;
}

div {
  margin-bottom: 20px;
}

li {
  display: inline-block;
  padding: 5px;
  border-right: 1px solid #333;
}

/* 問題1 子要素の最初のpタグの文字色を、#ff0000に変更してください */
p:first-child {
  color: #ff0000;
}

/* 問題2 子要素の最後のliタグのborder-rightを削除してください */
li:last-child {
  border-right: none;
}


* {
  text-align: center;
  list-style-type: none;
  padding: 0;
  font-size: 20px;
}

div {
  margin-bottom: 20px;
}

li {
  display: inline-block;
  padding: 5px;
  border-right: 1px solid #333;
}

/* 問題1 子要素の最初のpタグの文字色を、#ff0000に変更してください */

/* 問題2 子要素の最後のliタグのborder-rightを削除してください */


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

:nth-child()

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

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

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

background-color

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

:not()

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

:has()

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

:is()

border

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

:where()

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

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

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

0からWebサイト制作のコツを学び、案件獲得までに必要なスキルをキャッチアップします。

Web制作コース

【応用編📚】高度なCSSテクニックを習得しよう

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