Сила шаблонов: использование nth-child

Часть раздела CSS Mastery путешествия по HTML на Coddy — урок 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;
}

Проверьте себя

В этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.

Проверьте себя

В этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.

Проверьте себя

В этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.

Задание

Легко

Создайте CSS-правило, используя :nth-child(), чтобы задать каждому третьему <div> желтый фон.

Шпаргалка

Псевдокласс :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>

Проверьте себя

В этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.