パターンの活用：nth-child を使う

CoddyのHTMLジャーニー「CSS Mastery」セクションの一部 — レッスン 15/43。

:nth-child() 疑似クラスは、親要素内での順序に基づいて要素を選択します。数値やパターンを使用して、どの要素を選択するかを指定します。

例えば、次のようなリストがあります：

<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
  <li>Fourth item</li>
  <li>Fifth item</li>
</ul>

偶数番目のリスト項目を選択する方法は次のとおりです：

li:nth-child(even) {
  background-color: lightblue;
}

3番目の項目を選択する方法は次のとおりです：

li:nth-child(3) {
  font-weight: bold;
}

5番目ごとのアイテムを選択する方法は次のとおりです：

li:nth-child(5n) {
  color: red;
}

腕試し

このレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。

腕試し

このレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。

腕試し

このレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。

チャレンジ

簡単

:nth-child() を使用して、3 つごとの <div> の背景色を yellow にする CSS ルールを作成してください。

チートシート

:nth-child() 疑似クラスは、親要素内での順序に基づいて要素を選択します。

偶数番目の要素を選択する:

li:nth-child(even) {
  background-color: lightblue;
}

特定の要素（3番目）を選択する:

li:nth-child(3) {
  font-weight: bold;
}

n番目ごとの要素（5番目ごと）を選択する:

li:nth-child(5n) {
  color: red;
}

自分で試してみよう

<!DOCTYPE html>
<html>
<head>
    <title>Pattern Power: Using nth-child</title>
  <style>
    /* Write your CSS rule here */
    
  </style>
</head>
<body>
  <div class="container">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
    <div>Item 4</div>
    <div>Item 5</div>
    <div>Item 6</div>
    <div>Item 7</div>
    <div>Item 8</div>
    <div>Item 9</div>
    <div>Item 10</div>
  </div>
</body>
</html>

腕試し

このレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。