Дочерние селекторы (child selectors): Тренажер CSS

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

На этой странице собраны упражнения для отработки навыков использования дочерних селекторов (`>`) в CSS. Дочерний селектор позволяет выбрать элементы, которые являются непосредственными потомками (детьми) другого элемента. В отличие от селектора потомков (пробел), он не выбирает элементы, вложенные глубже. Задания построены по принципу "от простого к сложному" и помогут вам закрепить понимание того, как и когда использовать дочерние селекторы для точного стилистического оформления HTML-документов. Вам будет предложен HTML-код и CSS-код с пропусками, которые нужно заполнить, чтобы достичь нужного визуального результата.

Список тем

Выбор прямого потомка P

Сделайте текст параграфа, который является прямым дочерним элементом контейнера с классом `container`, красного цвета. Другие параграфы не должны измениться.

CSS

.container input1 p {
  color: red;
}

                     .container input1 p {
  color: red;
}

HTML

<div class="container">
  <p>Этот параграф - прямой потомок.</p>
  <div>
    <p>Этот параграф - вложенный, не прямой потомок.</p>
  </div>
</div>

Используйте дочерний селектор (`>`), чтобы выбрать только те элементы `p`, которые находятся непосредственно внутри элемента с классом `container`. Селектор должен выглядеть как `родитель > ребенок`.

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

Результат

Сообщения

Выполнить

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

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

Стилизация только прямых дочерних LI

Измените маркеры списка только для элементов `li`, которые являются прямыми дочерними элементами списка с ID `main-list`. Вложенные списки не должны быть затронуты.

CSS

#main-list input1 li {
  list-style-type: square;
}

                     #main-list input1 li {
  list-style-type: square;
}

HTML

<ul id="main-list">
  <li>Пункт 1</li>
  <li>Пункт 2
    <ul>
      <li>Вложенный пункт 2.1</li>
      <li>Вложенный пункт 2.2</li>
    </ul>
  </li>
  <li>Пункт 3</li>
</ul>

Чтобы выбрать только `li`, являющиеся непосредственными детьми `#main-list`, примените дочерний селектор (`>`) между селектором родителя (`#main-list`) и селектором дочернего элемента (`li`).

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

Результат

Сообщения

Выполнить

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

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

Выбор дочернего SPAN внутри P

Сделайте текст внутри элемента `span` жирным. Этот `span` должен быть прямым потомком элемента `p`, который, в свою очередь, является прямым потомком `div` с классом `content`.

CSS

.content input1 p input2 span {
  font-weight: bold;
}

                     .content input1 p input2 span {
  font-weight: bold;
}

HTML

<div class="content">
  <p>
    Текст параграфа и <span>этот текст должен стать жирным</span>.
  </p>
  <span>Этот span не должен измениться.</span>
</div>
<p><span>И этот span тоже.</span></p>

Вам нужно использовать два дочерних селектора (`>`) подряд. Сначала выберите `p` как прямого потомка `.content`, а затем `span` как прямого потомка `p`. Селектор будет иметь вид `.content > p > span`.

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

Результат

Сообщения

Выполнить

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

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

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

Уберите подчеркивание у ссылок (`a`), которые являются прямыми дочерними элементами пунктов списка (`li`) внутри блока навигации с классом `main-nav`.

CSS

.main-nav li input1 a {
  text-decoration: none;
}

                     .main-nav li input1 a {
  text-decoration: none;
}

HTML

<nav class="main-nav">
  <ul>
    <li><a href="#">Главная</a></li>
    <li><a href="#">О нас</a>
      <ul>
        <li><a href="#">Команда</a></li> <!-- Эта ссылка не должна измениться -->
      </ul>
    </li>
    <li><a href="#">Контакты</a></li>
  </ul>
</nav>

Нужно составить селектор, который сначала выбирает `li` внутри `.main-nav` (можно использовать селектор потомка - пробел), а затем выбирает `a` как прямого потомка `li` (используйте `>`). Например: `.main-nav li > a`.

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

Результат

Сообщения

Выполнить

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

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

Выбор дочерних элементов разных типов

Добавьте рамку толщиной 1px сплошного черного цвета (`solid black`) ко всем прямым дочерним элементам `h2` и `p` внутри элемента `article`.

CSS

article input1 h2, article input2 p {
  border: 1px solid black;
}

                     article input1 h2, article input2 p {
  border: 1px solid black;
}

HTML

<article>
  <h2>Заголовок статьи</h2>
  <p>Первый абзац статьи.</p>
  <div>
    <p>Абзац внутри div, не прямой потомок article.</p>
  </div>
  <p>Второй абзац статьи.</p>
</article>

Используйте группировку селекторов с помощью запятой (`,`). Для каждой группы примените дочерний селектор (`>`) для выбора `h2` и `p` как прямых потомков `article`. Селектор будет выглядеть так: `article > h2, article > p`.

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

Результат

Сообщения

Выполнить

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

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

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

Добавьте отступ (`padding`) размером 5px вокруг изображения (`img`), которое является прямым дочерним элементом `figure`. Подпись (`figcaption`) не должна получить отступ.

CSS

figure input1 img {
  padding: 5px;
  background-color: #eee; /* Добавлено для наглядности отступа */
}

                     figure input1 img {
  padding: 5px;
  background-color: #eee; /* Добавлено для наглядности отступа */
}

HTML

<figure>
  <img src="https://naytikurs.ru/img/1.png" alt="Пример изображения">
  <figcaption>Подпись к изображению</figcaption>
</figure>

Используйте дочерний селектор (`>`), чтобы выбрать `img` непосредственно внутри `figure`. Селектор: `figure > img`.

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

Результат

Сообщения

Выполнить

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

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

Заполнение пропущенных частей селектора

Сделайте фон элементов `span`, которые являются прямыми потомками элементов `div` с классом `item`, светло-серым (`#f0f0f0`). Заполните пропущенные части селектора.

CSS

input1 input2 input3 {
  background-color: #f0f0f0;
}

                     input1 input2 input3 {
  background-color: #f0f0f0;
}

HTML

<div class="item">
  <span>Элемент 1</span>
</div>
<div class="item">
  <p><span>Элемент 2 (не прямой потомок)</span></p>
</div>
<div class="item">
  <span>Элемент 3</span>
</div>

Вам нужно указать родительский селектор (`div.item`), дочерний селектор (`>`) и дочерний элемент (`span`).

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

Результат

Сообщения

Выполнить

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

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

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

Выделите жирным шрифтом только первый элемент списка (`li`), который является прямым потомком списка (`ul`) с классом `steps`.

CSS

ul.steps input1 li:first-child {
  font-weight: bold;
}

                     ul.steps input1 li:first-child {
  font-weight: bold;
}

HTML

<ul class="steps">
  <li>Шаг 1</li>
  <li>Шаг 2</li>
  <li>Шаг 3</li>
</ul>

Используйте комбинацию дочернего селектора (`>`) и псевдокласса `:first-child`. Селектор будет выглядеть как `ul.steps > li:first-child`.

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

Результат

Сообщения

Выполнить

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

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

Выбор дочерних input в форме

Добавьте нижний отступ (`margin-bottom`) размером 10px ко всем элементам `input`, которые являются прямыми дочерними элементами `div` с классом `form-group`.

CSS

.form-group input1 input {
  margin-bottom: 10px;
  display: block; /* Для наглядности отступа */
  width: 90%;
}

                     .form-group input1 input {
  margin-bottom: 10px;
  display: block; /* Для наглядности отступа */
  width: 90%;
}

HTML

<div class="form-group">
  <label>Имя:</label>
  <input type="text" name="name">
</div>
<div class="form-group">
  <label>Email:</label>
  <input type="email" name="email">
  <div><input type="checkbox"> Согласен (не прямой потомок)</div>
</div>

Используйте дочерний селектор (`>`) между селектором родителя (`div.form-group`) и селектором дочернего элемента (`input`).

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

Результат

Сообщения

Выполнить

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

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

Сложная вложенность с дочерним селектором

Измените цвет текста на синий (`blue`) для элемента `strong`, который является прямым потомком `span`, который в свою очередь является прямым потомком `p` с классом `highlight`.

CSS

p.highlight input1 span input2 strong {
  color: blue;
}

                     p.highlight input1 span input2 strong {
  color: blue;
}

HTML

<p class="highlight">
  Обычный текст
  <span>и текст в span со <strong>вложенным strong</strong></span>.
</p>
<p>
  <span>Другой span <strong>и strong</strong></span>
</p>

Вам нужно последовательно применить два дочерних селектора (`>`). Селектор будет иметь вид: `p.highlight > span > strong`.

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

Результат

Сообщения

Выполнить

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

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

Выбор дочернего элемента по атрибуту

Добавьте зеленую рамку (`2px solid green`) только для того изображения (`img`), которое является прямым потомком ссылки (`a`) с классом `image-link`.

CSS

a.image-link input1 img {
  border: 2px solid green;
}

                     a.image-link input1 img {
  border: 2px solid green;
}

HTML

<div>
  <a href="#" class="image-link">
    <img src="https://naytikurs.ru/img/2.png" alt="Картинка 1">
  </a>
  <a href="#">
    <img src="https://naytikurs.ru/img/4.png" alt="Картинка 2 (не в .image-link)">
  </a>
  <div class="image-link">
     <img src="https://naytikurs.ru/img/5.png" alt="Картинка 3 (не в ссылке)">
  </div>
</div>

Сначала выберите ссылку с классом `a.image-link`, а затем используйте дочерний селектор (`>`) для выбора прямого потомка `img`.

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

Результат

Сообщения

Выполнить

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

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

Указание родителя и дочернего элемента

Добавьте верхнюю рамку (`border-top`) толщиной 3px пунктирного синего цвета (`3px dotted blue`) к элементам `section`, которые являются прямыми потомками элемента `main`.

CSS

input1 input2 input3 {
  border-top: 3px dotted blue;
  padding-top: 5px; /* Небольшой отступ для наглядности */
  margin-bottom: 10px; /* Отступ между секциями */
}

                     input1 input2 input3 {
  border-top: 3px dotted blue;
  padding-top: 5px; /* Небольшой отступ для наглядности */
  margin-bottom: 10px; /* Отступ между секциями */
}

HTML

<main>
  <section>
    <h2>Секция 1</h2>
    <p>Контент секции 1.</p>
  </section>
  <div>
    <section>
      <h2>Секция 2 (не прямой потомок main)</h2>
      <p>Контент секции 2.</p>
    </section>
  </div>
  <section>
    <h2>Секция 3</h2>
    <p>Контент секции 3.</p>
  </section>
</main>

Вам нужно указать родительский элемент (`main`), дочерний селектор (`>`) и дочерний элемент (`section`).

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

Результат

Сообщения

Выполнить

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

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