Псевдоклассы :nth-child() и :nth-of-type(): Тренажер CSS

Тренажер по CSS для пользователей с начальным уровнем подготовки.

Эта серия упражнений предназначена для отработки навыков использования псевдоклассов `:nth-child()` и `:nth-of-type()`. Вам будут предложены различные HTML-структуры и CSS-стили с пропусками. Ваша задача — заполнить эти пропуски таким образом, чтобы добиться указанного в описании визуального результата. Задания охватывают выбор элементов по их порядковому номеру среди всех дочерних элементов или среди элементов определенного типа, использование ключевых слов `odd` и `even`, а также формул `an+b` для более сложных выборок. Эти упражнения помогут вам понять разницу между `:nth-child()` и `:nth-of-type()` и научиться применять их в различных ситуациях.

Список тем

Выбор второго элемента списка

Используя псевдокласс `:nth-child()`, задайте для второго элемента (`<li>`) в списке `ul` синий цвет текста (`color: blue;`). Остальные элементы должны остаться черными.

CSS

ul li { 
  color: black;
}

ul li:input1 { 
  color: blue;
}

                     ul li { 
  color: black;
}

ul li:input1 { 
  color: blue;
}

HTML

<ul>
  <li>Первый элемент</li>
  <li>Второй элемент</li>
  <li>Третий элемент</li>
  <li>Четвертый элемент</li>
</ul>

Псевдокласс `:nth-child(n)` выбирает дочерние элементы, которые являются n-ми по счету среди всех дочерних элементов своего родителя. Чтобы выбрать второй элемент, используйте `:nth-child(2)`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Выбор второго параграфа

Задайте для второго элемента `<p>` внутри `div` зеленый цвет текста (`color: green;`). Обратите внимание, что внутри `div` есть и другие элементы.

CSS

div * { 
  color: black;
}

div pinput1 { 
  color: green;
}

                     div * { 
  color: black;
}

div pinput1 { 
  color: green;
}

HTML

<div>
  <h1>Заголовок</h1>
  <p>Первый параграф.</p>
  <p>Второй параграф.</p>
  <span>Какой-то текст в span.</span>
  <p>Третий параграф.</p>
</div>

Псевдокласс `:nth-of-type(n)` выбирает дочерние элементы определенного типа, которые являются n-ми по счету среди элементов этого типа у своего родителя. Чтобы выбрать второй параграф `<p>`, используйте `:nth-of-type(2)` для селектора `p`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Стилизация нечетных элементов списка

Сделайте фон (`background-color: #f0f0f0;`) для всех нечетных элементов (`<li>`) в списке `ul`.

CSS

ul li { 
  padding: 5px;
  margin-bottom: 2px;
}

ul input1 { 
  background-color: #f0f0f0;
}

                     ul li { 
  padding: 5px;
  margin-bottom: 2px;
}

ul input1 { 
  background-color: #f0f0f0;
}

HTML

<ul>
  <li>Элемент 1</li>
  <li>Элемент 2</li>
  <li>Элемент 3</li>
  <li>Элемент 4</li>
  <li>Элемент 5</li>
</ul>

Псевдокласс `:nth-child()` принимает ключевое слово `odd` для выбора всех нечетных дочерних элементов (1-й, 3-й, 5-й и т.д.). Используйте `li:nth-child(odd)`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Стилизация четных элементов span

Задайте жирное начертание (`font-weight: bold;`) для всех четных элементов `<span>` внутри контейнера `div`. Другие элементы не должны быть затронуты.

CSS

div span { 
  font-weight: normal;
  display: block; /* Для наглядности */
  margin-bottom: 5px;
}

div input1 { 
  font-weight: bold;
}

                     div span { 
  font-weight: normal;
  display: block; /* Для наглядности */
  margin-bottom: 5px;
}

div input1 { 
  font-weight: bold;
}

HTML

<div>
  <p>Параграф 1</p>
  <span>Span 1</span>
  <span>Span 2</span>
  <p>Параграф 2</p>
  <span>Span 3</span>
  <span>Span 4</span>
  <span>Span 5</span>
</div>

Псевдокласс `:nth-of-type()` принимает ключевое слово `even` для выбора всех четных дочерних элементов указанного типа (2-й, 4-й, 6-й и т.д.). Используйте `span:nth-of-type(even)`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Выбор каждого третьего элемента

Используя формулу `an`, выберите каждый третий элемент (`<li>`) в списке и задайте ему фоновый цвет `#e0e0ff`.

CSS

ol li { 
  padding: 4px;
  margin-bottom: 3px;
}

ol li:nth-child(input1) { 
  background-color: #e0e0ff;
}

                     ol li { 
  padding: 4px;
  margin-bottom: 3px;
}

ol li:nth-child(input1) { 
  background-color: #e0e0ff;
}

HTML

<ol>
  <li>Пункт 1</li>
  <li>Пункт 2</li>
  <li>Пункт 3</li>
  <li>Пункт 4</li>
  <li>Пункт 5</li>
  <li>Пункт 6</li>
  <li>Пункт 7</li>
  <li>Пункт 8</li>
  <li>Пункт 9</li>
</ol>

Формула `an` в `:nth-child(an)` выбирает каждый n-й элемент. Чтобы выбрать каждый третий элемент (3-й, 6-й, 9-й и т.д.), используйте формулу `3n`. Полный селектор будет `li:nth-child(3n)`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Выбор элементов начиная с третьего

С помощью формулы `n+b` выделите все элементы списка (`<li>`), начиная с третьего, добавив им рамку `border: 1px solid red;`.

CSS

ul.items li { 
  padding: 5px;
  margin: 2px 0;
}

ul.items li:nth-child(input1) { 
  border: 1px solid red;
}

                     ul.items li { 
  padding: 5px;
  margin: 2px 0;
}

ul.items li:nth-child(input1) { 
  border: 1px solid red;
}

HTML

<ul class="items">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

Формула `n+b` в `:nth-child(n+b)` выбирает все элементы, начиная с b-го. Чтобы выбрать элементы с третьего и до конца, используйте `n+3`. Полный селектор: `li:nth-child(n+3)`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Выбор первых трех элементов

Используя формулу `-n+b`, задайте первым трем элементам `<div>` внутри контейнера `#box-container` фоновый цвет `#fff0e6`.

CSS

#box-container div { 
  border: 1px solid #ccc;
  padding: 10px;
  margin: 5px;
}

#box-container div:nth-child(input1) { 
  background-color: #fff0e6;
}

                     #box-container div { 
  border: 1px solid #ccc;
  padding: 10px;
  margin: 5px;
}

#box-container div:nth-child(input1) { 
  background-color: #fff0e6;
}

HTML

<div id="box-container">
  <div>Блок 1</div>
  <div>Блок 2</div>
  <div>Блок 3</div>
  <div>Блок 4</div>
  <div>Блок 5</div>
</div>

Формула `-n+b` в `:nth-child(-n+b)` выбирает первые b элементов. Чтобы выбрать первые три элемента, используйте `-n+3`. Полный селектор: `#box-container div:nth-child(-n+3)`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Выбор каждого четвертого элемента, начиная со второго

Примените стиль `text-decoration: underline;` ко второму, шестому, десятому и т.д. элементам `<span>` внутри `div.text-block`, используя псевдокласс `:nth-child()` и формулу `an+b`.

CSS

div.text-block span { 
  display: inline-block; /* Для наглядности */
  margin: 0 5px;
  padding: 2px 4px;
  border: 1px solid lightgray;
}

div.text-block span:input1(input2) { 
  text-decoration: underline;
}

                     div.text-block span { 
  display: inline-block; /* Для наглядности */
  margin: 0 5px;
  padding: 2px 4px;
  border: 1px solid lightgray;
}

div.text-block span:input1(input2) { 
  text-decoration: underline;
}

HTML

<div class="text-block">
  <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>
  <span>6</span><span>7</span><span>8</span><span>9</span><span>10</span>
  <span>11</span><span>12</span>
</div>

Формула `an+b` выбирает элементы, начиная с b-го, с шагом a. Чтобы выбрать каждый четвертый элемент, начиная со второго (2, 6, 10...), используйте `4n+2`. Полный селектор: `div.text-block span:nth-child(4n+2)`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Выбор каждой второй картинки

Сделайте каждую вторую картинку (`<img>`) внутри `div.gallery` полупрозрачной (`opacity: 0.5;`), используя псевдокласс `:nth-of-type()`.

CSS

div.gallery img { 
  width: 80px;
  height: 80px;
  margin: 5px;
  border: 1px solid black;
  opacity: 1;
  transition: opacity 0.3s;
}

div.gallery input1:input2(input3) { 
  opacity: 0.5;
}

                     div.gallery img { 
  width: 80px;
  height: 80px;
  margin: 5px;
  border: 1px solid black;
  opacity: 1;
  transition: opacity 0.3s;
}

div.gallery input1:input2(input3) { 
  opacity: 0.5;
}

HTML

<div class="gallery">
  <img src="https://naytikurs.ru/img/1.png" alt="Image 1">
  <img src="https://naytikurs.ru/img/2.png" alt="Image 2">
  <p>Текст между картинками</p>
  <img src="https://naytikurs.ru/img/4.png" alt="Image 3">
  <img src="https://naytikurs.ru/img/5.png" alt="Image 4">
  <img src="https://naytikurs.ru/img/6.png" alt="Image 5">
</div>

Чтобы выбрать каждый второй элемент определенного типа (в данном случае `<img>`), используйте `:nth-of-type(2n)` или `:nth-of-type(even)`. Полный селектор: `div.gallery img:nth-of-type(2n)`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Разница между :nth-child() и :nth-of-type()

В контейнере есть заголовок `<h1>` и несколько параграфов `<p>`. Сделайте текст второго *дочернего элемента* красным (`color: red;`), а текст второго *параграфа* (`<p>`) зеленым (`color: green;`).

CSS

.container * { 
  margin-bottom: 5px;
}

.container input1:input2(2) { 
  color: red; /* Стиль для второго дочернего элемента */
}

.container input3:input4(2) { 
  color: green; /* Стиль для второго параграфа */
}

                     .container * { 
  margin-bottom: 5px;
}

.container input1:input2(2) { 
  color: red; /* Стиль для второго дочернего элемента */
}

.container input3:input4(2) { 
  color: green; /* Стиль для второго параграфа */
}

HTML

<div class="container">
  <h1>Заголовок</h1>
  <p>Первый параграф.</p>
  <p>Второй параграф.</p>
  <p>Третий параграф.</p>
</div>

`:nth-child(2)` выберет второй дочерний элемент, независимо от его типа (в данном случае это первый `<p>`). `:nth-of-type(2)` выберет второй элемент типа `<p>` (второй параграф).

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Стилизация кнопок через одну, начиная с первой

Задайте кнопкам (`<button>`) с нечетными порядковыми номерами среди кнопок внутри `div.actions` фоновый цвет `#add8e6` (светло-голубой).

CSS

.actions button { 
  margin: 5px;
  padding: 8px 15px;
  border: 1px solid #aaa;
  background-color: #eee;
}

.actions input1:nth-of-type(input2) { 
  background-color: #add8e6;
}

                     .actions button { 
  margin: 5px;
  padding: 8px 15px;
  border: 1px solid #aaa;
  background-color: #eee;
}

.actions input1:nth-of-type(input2) { 
  background-color: #add8e6;
}

HTML

<div class="actions">
  <button>Кнопка 1</button>
  <span>Текст</span>
  <button>Кнопка 2</button>
  <button>Кнопка 3</button>
  <span>Еще текст</span>
  <button>Кнопка 4</button>
  <button>Кнопка 5</button>
</div>

Используйте псевдокласс `:nth-of-type()` с ключевым словом `odd` или формулой `2n+1` для выбора нечетных элементов типа `<button>`. Селектор: `button:nth-of-type(odd)` или `button:nth-of-type(2n+1)`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Комбинация :nth-child() с классом

В списке есть элементы с классом `.highlight`. Сделайте текст третьего элемента списка (`<li>`), который *также* имеет класс `.highlight`, жирным (`font-weight: bold;`).

CSS

ul.mixed li { 
  padding: 3px;
}

ul.mixed input1 { 
  font-weight: bold;
}

                     ul.mixed li { 
  padding: 3px;
}

ul.mixed input1 { 
  font-weight: bold;
}

HTML

<ul class="mixed">
  <li>Элемент 1</li>
  <li class="highlight">Элемент 2 (highlight)</li>
  <li class="highlight">Элемент 3 (highlight)</li>
  <li>Элемент 4</li>
  <li class="highlight">Элемент 5 (highlight)</li>
</ul>

Чтобы выбрать элемент, который является n-м дочерним *и* имеет определенный класс, скомбинируйте селектор класса и псевдокласс `:nth-child()`. Важно не ставить пробел между ними. Пример: `li.highlight:nth-child(3)`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку