:nth-child()

color

<ul>
  <li>Orange</li>
  <li>Banana</li>
  <li>Apple</li>
  <li>Durian</li>
  <li>Elderberry</li>
</ul>


/* 問題1. :nth-childを使って、3番目のli要素のみ文字色を#ff0000にしてください */
li:nth-child(3) {
  color: #ff0000;
}


/* 問題1. :nth-childを使って、3番目のli要素のみ文字色を#ff0000にしてください */



    const questions = [
        {
            title: '`*:nth-child*`を使って、3番目の`*li*`要素のみ文字色を`*#ff0000*`にしてください',
            tests: [
                {
                    title: '3番目の`*li*`要素の文字色を変更しよう',
                    hint: '`*:nth-child()*`を使って、3番目の`*li*`要素に対して、*color*プロパティを`*#ff0000*`で指定してください',
                    test: () => isContainTextInEditor('color: #ff0000;', 'style.css', 'li:nth-child(3) {', '}')
                }
            ]
        }
    ];


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

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

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

background-color

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

:first-child, :last-child

border-[上下左右]

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

:not()

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

:has()

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

:is()

border

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

:where()

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

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

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

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

Web制作コース

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

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