Структурные псевдоклассы (:first-child, :last-child): Тренажер CSS

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

Эта серия заданий посвящена структурным псевдоклассам `:first-child` и `:last-child` в CSS. Они позволяют выбирать элементы на основе их позиции среди дочерних элементов одного родителя. Вы будете практиковаться в выборе первого или последнего дочернего элемента, комбинируя эти псевдоклассы с различными селекторами (тегами, классами) для применения стилей. Задания построены от простого к сложному, помогая закрепить понимание и использование этих мощных селекторов.

Список тем

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

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

CSS

ul li:input1 {
  color: red;
}

                     ul li:input1 {
  color: red;
}

HTML

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

Чтобы выбрать первый дочерний элемент среди его братьев и сестер, используйте псевдокласс `:first-child`. Добавьте его к селектору `li`.

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

Результат

Сообщения

Выполнить

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

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

Выбор последнего параграфа

Примените жирное начертание текста к последнему параграфу (`<p>`) внутри элемента `<div>`.

CSS

div p:input1 {
  font-weight: bold;
}

                     div p:input1 {
  font-weight: bold;
}

HTML

<div>
  <p>Это первый параграф.</p>
  <p>Это второй параграф.</p>
  <p>Это последний параграф.</p>
</div>

Для выбора последнего дочернего элемента используйте псевдокласс `:last-child`. Примените его к селектору `p` внутри `div`.

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

Результат

Сообщения

Выполнить

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

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

Стилизация первой строки таблицы

Задайте светло-серый фон для первой строки (`<tr>`) в теле таблицы (`<tbody>`).

CSS

tbody tr:input1 {
  background-color: lightgray;
}

                     tbody tr:input1 {
  background-color: lightgray;
}

HTML

<table>
  <thead>
    <tr><th>Заголовок 1</th><th>Заголовок 2</th></tr>
  </thead>
  <tbody>
    <tr><td>Данные 1.1</td><td>Данные 1.2</td></tr>
    <tr><td>Данные 2.1</td><td>Данные 2.2</td></tr>
    <tr><td>Данные 3.1</td><td>Данные 3.2</td></tr>
  </tbody>
</table>

Псевдокласс `:first-child` можно применять к любым элементам, включая строки таблицы (`<tr>`). Выберите первую `<tr>` внутри `<tbody>`.

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

Результат

Сообщения

Выполнить

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

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

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

Выровняйте текст по правому краю в последней ячейке (`<td>`) каждой строки таблицы.

CSS

td:input1 {
  text-align: right;
}

                     td:input1 {
  text-align: right;
}

HTML

<table>
  <tbody>
    <tr><td>Ячейка 1</td><td>Ячейка 2</td><td>Ячейка 3</td></tr>
    <tr><td>Ячейка 4</td><td>Ячейка 5</td><td>Ячейка 6</td></tr>
  </tbody>
</table>

Используйте псевдокласс `:last-child` в сочетании с селектором `td`, чтобы стилизовать только последние ячейки в строках.

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

Результат

Сообщения

Выполнить

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

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

Первый элемент определенного типа

Добавьте рамку к первому элементу `<span>` внутри `div`, но только если этот `span` является самым первым дочерним элементом `div`.

CSS

.container input1:input2 {
  border: 1px solid blue;
}

                     .container input1:input2 {
  border: 1px solid blue;
}

HTML

<div class="container">
  <span>Это первый span (и первый ребенок)</span>
  <p>Параграф</p>
</div>
<div class="container">
  <p>Параграф</p>
  <span>Это span (но не первый ребенок)</span>
</div>

Комбинируйте селектор тега (`span`) с псевдоклассом `:first-child`. Правило сработает только если `span` — первый ребенок родителя.

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

Результат

Сообщения

Выполнить

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

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

Последний элемент определенного типа

Сделайте текст курсивным для последнего элемента `<em>` внутри `div`, но только если этот `<em>` является последним дочерним элементом `div`.

CSS

.highlight input1:input2 {
  font-style: italic;
}

                     .highlight input1:input2 {
  font-style: italic;
}

HTML

<div class="highlight">
  <p>Какой-то текст</p>
  <em>Это последний em (и последний ребенок)</em>
</div>
<div class="highlight">
  <em>Это em (но не последний ребенок)</em>
  <p>Еще текст</p>
</div>

Используйте комбинацию селектора тега (`em`) и псевдокласса `:last-child`. Стиль применится только если `<em>` — последний ребенок родителя.

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

Результат

Сообщения

Выполнить

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

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

Стилизация первого и последнего элементов списка

Задайте синий фон первому элементу списка (`<li>`) и зеленый фон последнему элементу списка.

CSS

ol li:input1 {
  background-color: lightblue;
}

ol li:input2 {
  background-color: lightgreen;
}

                     ol li:input1 {
  background-color: lightblue;
}

ol li:input2 {
  background-color: lightgreen;
}

HTML

<ol>
  <li>Пункт 1</li>
  <li>Пункт 2</li>
  <li>Пункт 3</li>
  <li>Пункт 4</li>
</ol>

Вам понадобятся два CSS-правила. Одно с `:first-child` для первого элемента, другое с `:last-child` для последнего элемента. Оба применяются к селектору `li`.

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

Результат

Сообщения

Выполнить

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

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

Первая картинка в галерее

Добавьте золотую рамку толщиной 3px к первому изображению (`<img>`) в блоке с классом `gallery`.

CSS

.gallery input1:input2 {
  border: 3px solid gold;
}

                     .gallery input1:input2 {
  border: 3px solid gold;
}

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">
  <img src="https://naytikurs.ru/img/4.png" alt="Image 3">
</div>

Используйте селектор класса `.gallery`, затем селектор тега `img` и псевдокласс `:first-child`.

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

Результат

Сообщения

Выполнить

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

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

Последняя картинка в галерее

Добавьте отступ (padding) 10px к последнему изображению (`<img>`) в блоке с классом `image-container`.

CSS

.image-container img:input1 {
  padding: 10px;
  background-color: #f0f0f0; /* Добавлено для наглядности отступа */
}

                     .image-container img:input1 {
  padding: 10px;
  background-color: #f0f0f0; /* Добавлено для наглядности отступа */
}

HTML

<div class="image-container">
  <img src="https://naytikurs.ru/img/5.png" alt="Pic 1">
  <img src="https://naytikurs.ru/img/6.png" alt="Pic 2">
  <img src="https://naytikurs.ru/img/7.png" alt="Pic 3">
</div>

Выберите последнее изображение внутри `.image-container`, используя селектор тега `img` и псевдокласс `:last-child`.

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

Результат

Сообщения

Выполнить

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

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

Стилизация первой и последней ссылок в навигации

Уберите подчеркивание у первой ссылки (`<a>`) и добавьте рамку к последней ссылке (`<a>`) в элементе `<nav>`.

CSS

nav a:input1 {
  text-decoration: none;
}

nav input2:input3 {
  border: 1px solid black;
  padding: 2px 4px; /* Для наглядности рамки */
}

                     nav a:input1 {
  text-decoration: none;
}

nav input2:input3 {
  border: 1px solid black;
  padding: 2px 4px; /* Для наглядности рамки */
}

HTML

<nav>
  <a href="#">Главная</a>
  <a href="#">О нас</a>
  <a href="#">Услуги</a>
  <a href="#">Контакты</a>
</nav>

Понадобятся два правила: одно для `nav a:first-child` со свойством `text-decoration: none;`, другое для `nav a:last-child` со свойством `border: 1px solid black;`.

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

Результат

Сообщения

Выполнить

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

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

Сложный селектор: последний элемент в первом блоке

Задайте светло-желтый фон последнему элементу `<li>` внутри списка `<ul>`, который находится в первой секции (`<section>`) на странице.

CSS

section:input1 ul input2:input3 {
  background-color: lightyellow;
}

                     section:input1 ul input2:input3 {
  background-color: lightyellow;
}

HTML

<section>
  <h2>Секция 1</h2>
  <ul>
    <li>Элемент 1.1</li>
    <li>Элемент 1.2</li>
  </ul>
</section>
<section>
  <h2>Секция 2</h2>
  <ul>
    <li>Элемент 2.1</li>
    <li>Элемент 2.2</li>
  </ul>
</section>

Используйте цепочку селекторов: выберите первую `<section>` с помощью `:first-child`, затем в ней найдите `<ul>`, и внутри него выберите последний `<li>` с помощью `:last-child`.

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

Результат

Сообщения

Выполнить

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

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

Нюанс :first-child

Попробуйте выбрать первый параграф (`<p>`) внутри `div` и сделать его текст красным, используя `:first-child`. Обратите внимание, почему стиль не применился ко второму блоку.

CSS

.box p:input1 {
  color: red;
}

                     .box p:input1 {
  color: red;
}

HTML

<div class="box">
  <p>Первый параграф (и первый ребенок)</p>
  <p>Второй параграф</p>
</div>
<div class="box">
  <h2>Заголовок</h2>
  <p>Первый параграф (но не первый ребенок)</p>
  <p>Второй параграф</p>
</div>

Псевдокласс `:first-child` выбирает элемент, только если он является САМЫМ первым ребенком своего родителя. Если перед параграфом есть другой элемент (например, `<h2>`), то `p:first-child` не сработает для этого параграфа. Вставьте `first-child` в поле.

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

Результат

Сообщения

Выполнить

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

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