Соседние селекторы (adjacent sibling selectors): Тренажер CSS

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

На этой странице собраны упражнения для отработки навыков использования соседнего селектора (`+`) в CSS. Этот селектор позволяет стилизовать элемент, который находится непосредственно *после* другого указанного элемента на том же уровне вложенности (является его соседним братом). Задания построены по принципу 'от простого к сложному', начиная с базового применения селектора и заканчивая более сложными комбинациями. Вам будет предложен HTML-код и CSS-код с пропусками, которые нужно заполнить, чтобы достичь описанного визуального результата. Теории здесь нет, только практика!

Список тем

Выделение первого абзаца после заголовка

Задача: Используя соседний селектор, измените цвет текста первого абзаца (`<p>`), который идет сразу после заголовка второго уровня (`<h2>`), на синий (`blue`). Остальные абзацы должны остаться черными.

CSS

h2 input1 {
  color: blue;
}

                     h2 input1 {
  color: blue;
}

HTML

<div>
  <h2>Заголовок</h2>
  <p>Этот абзац должен стать синим.</p>
  <p>Этот абзац останется черным.</p>
</div>
<h3>Другой заголовок</h3>
<p>Этот абзац тоже останется черным.</p>

Чтобы выбрать элемент, который является непосредственным соседом другого элемента (идет сразу после него на том же уровне), используйте селектор `+`. В данном случае нужно выбрать `<p>`, который следует за `<h2>`. Конструкция будет выглядеть как `селектор_предшественника + селектор_цели`.

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

Результат

Сообщения

Выполнить

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

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

Стиль для элемента после изображения

Задача: Сделайте так, чтобы текст в элементе `<span>`, который идет сразу после изображения (`<img>`), стал курсивным (`italic`).

CSS

img input1 {
  font-style: italic;
}

                     img input1 {
  font-style: italic;
}

HTML

<div>
  <p>Какой-то текст.</p>
  <img src="https://naytikurs.ru/img/1.png" alt="Картинка">
  <span>Этот текст должен стать курсивным.</span>
  <p>Еще текст.</p>
</div>

Используйте соседний селектор `+` для выбора элемента `<span>`, который находится непосредственно после элемента `<img>`. Свойство для курсивного начертания - `font-style`.

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

Результат

Сообщения

Выполнить

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

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

Отступ для второго пункта списка

Задача: Добавьте верхний отступ (`margin-top`) размером `10px` для всех элементов списка (`<li>`), которые следуют непосредственно за другим элементом списка. Первый элемент списка должен остаться без отступа сверху.

CSS

input1 {
  margin-top: 10px;
}

                     input1 {
  margin-top: 10px;
}

HTML

<ul>
  <li>Пункт 1</li>
  <li>Пункт 2 (нужен отступ сверху)</li>
  <li>Пункт 3 (нужен отступ сверху)</li>
  <li>Пункт 4 (нужен отступ сверху)</li>
</ul>

Чтобы применить стиль ко всем элементам `<li>`, кроме первого, можно использовать соседний селектор. Выберите `<li>`, который идет сразу после другого `<li>`. Конструкция: `li + li`.

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

Результат

Сообщения

Выполнить

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

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

Выделение подписи к отмеченному чекбоксу

Задача: Сделайте так, чтобы текст подписи (`<label>`), идущей сразу после *отмеченного* чекбокса (`<input type="checkbox">`), становился жирным (`bold`).

CSS

input[type="checkbox"]input1 {
  font-weight: bold;
}

                     input[type="checkbox"]input1 {
  font-weight: bold;
}

HTML

<div>
  <input type="checkbox" id="cb1" checked>
  <label for="cb1">Эта подпись должна быть жирной</label>
</div>
<div>
  <input type="checkbox" id="cb2">
  <label for="cb2">Эта подпись останется обычной</label>
</div>

Используйте псевдокласс `:checked` для выбора отмеченного чекбокса, а затем соседний селектор `+` для выбора следующего за ним элемента `<label>`. Свойство для жирного начертания - `font-weight`.

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

Результат

Сообщения

Выполнить

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

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

Стиль для абзаца после заголовка с классом

Задача: Задайте красный цвет (`red`) тексту абзаца (`<p>`), который идет сразу после заголовка `<h3>` с классом `highlight`.

CSS

h3.highlight input1 {
  color: red;
}

                     h3.highlight input1 {
  color: red;
}

HTML

<div>
  <h3 class="highlight">Важный заголовок</h3>
  <p>Этот текст должен стать красным.</p>
  <h3>Обычный заголовок</h3>
  <p>Этот текст останется черным.</p>
</div>

Сначала выберите заголовок `<h3>` с классом `highlight` (используя селектор класса `.highlight`), а затем с помощью соседнего селектора `+` выберите следующий за ним абзац `<p>`.

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

Результат

Сообщения

Выполнить

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

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

Изменение фона блока после активной ссылки

Задача: Установите светло-серый (`lightgray`) фон для блока `<div>` с классом `details`, который идет сразу после ссылки (`<a>`) с классом `active`.

CSS

a.active input1 {
  background-color: lightgray;
  padding: 10px; /* Добавлено для наглядности */
}

                     a.active input1 {
  background-color: lightgray;
  padding: 10px; /* Добавлено для наглядности */
}

HTML

<div>
  <a href="#" class="active">Активная ссылка</a>
  <div class="details">Этот блок должен получить серый фон.</div>
  <a href="#">Обычная ссылка</a>
  <div class="details">Этот блок останется без фона.</div>
</div>

Выберите ссылку с классом `active` (`a.active`), а затем используйте соседний селектор `+` для выбора следующего за ней элемента `div` с классом `details` (`div.details`). Свойство для фона - `background-color`.

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

Результат

Сообщения

Выполнить

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

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

Стиль для второго абзаца после заголовка (цепочка)

Задача: Сделайте текст *второго* абзаца (`<p>`), следующего за заголовком `<h2>`, подчеркнутым (`underline`). Первый абзац должен остаться без изменений.

CSS

input1 {
  text-decoration: underline;
}

                     input1 {
  text-decoration: underline;
}

HTML

<div>
  <h2>Заголовок раздела</h2>
  <p>Первый абзац (без изменений).</p>
  <p>Второй абзац (должен быть подчеркнут).</p>
  <p>Третий абзац (без изменений).</p>
</div>

Соседний селектор `+` выбирает только *непосредственно* следующий элемент. Чтобы выбрать второй абзац, вам нужно сначала выбрать первый абзац, который идет после `h2`, а затем выбрать абзац, который идет после этого первого абзаца. Это делается цепочкой соседних селекторов: `h2 + p + p`. Свойство для подчеркивания - `text-decoration`.

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

Результат

Сообщения

Выполнить

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

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

Рамка для картинки после определенного абзаца

Задача: Добавьте сплошную черную рамку (`border`) толщиной `2px` к изображению (`<img>`), которое идет сразу после абзаца (`<p>`) с классом `image-caption`.

CSS

p.image-caption input1 {
  border: 2px solid black;
}

                     p.image-caption input1 {
  border: 2px solid black;
}

HTML

<div>
  <p>Обычный абзац.</p>
  <img src="https://naytikurs.ru/img/2.png" alt="Картинка 1">
  <p class="image-caption">Подпись к картинке 2.</p>
  <img src="https://naytikurs.ru/img/4.png" alt="Картинка 2">
  <p>Еще один абзац.</p>
</div>

Сначала выберите абзац с классом `image-caption` (`p.image-caption`), а затем используйте соседний селектор `+` для выбора следующего за ним изображения (`<img>`).

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

Результат

Сообщения

Выполнить

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

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

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

Задача: Скройте блок `<div>` с классом `spoiler`, который идет сразу после заголовка `<h4>`. Используйте свойство `display` со значением `none`.

CSS

h4 input1 {
  display: none;
}

                     h4 input1 {
  display: none;
}

HTML

<div>
  <h4>Нажмите, чтобы узнать больше (условно)</h4>
  <div class="spoiler">Этот контент должен быть скрыт.</div>
  <p>Видимый контент.</p>
</div>

Выберите заголовок `<h4>`, а затем с помощью соседнего селектора `+` выберите следующий за ним элемент `div` с классом `spoiler` (`div.spoiler`).

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

Результат

Сообщения

Выполнить

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

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

Стиль для заголовка, следующего за другим заголовком

Задача: Увеличьте размер шрифта (`font-size`) до `1.5em` для заголовка `<h3>`, который идет сразу после заголовка `<h2>`.

CSS

h2 input1 {
  font-size: 1.5em;
}

                     h2 input1 {
  font-size: 1.5em;
}

HTML

<div>
  <h2>Главный заголовок</h2>
  <h3>Подзаголовок 1 (должен стать крупнее)</h3>
  <p>Текст...</p>
  <h3>Подзаголовок 2 (размер не меняется)</h3>
</div>

Используйте соседний селектор `+` для выбора элемента `<h3>`, который находится непосредственно после элемента `<h2>`.

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

Результат

Сообщения

Выполнить

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

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

Выбор соседнего элемента по ID

Задача: Задайте зеленую рамку (`border`) толщиной `1px` элементу с ID `second`, который идет сразу после элемента с ID `first`.

CSS

#first input1 {
  border: 1px solid green;
  padding: 5px; /* Для наглядности */
}

                     #first input1 {
  border: 1px solid green;
  padding: 5px; /* Для наглядности */
}

HTML

<div>
  <p id="first">Первый блок</p>
  <p id="second">Второй блок (нужна рамка)</p>
  <p id="third">Третий блок</p>
</div>

Выберите элемент с ID `first` (используя `#first`), а затем с помощью соседнего селектора `+` выберите следующий элемент с ID `second` (`#second`).

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

Результат

Сообщения

Выполнить

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

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

Несколько пропусков: стиль для span после strong

Задача: Сделайте так, чтобы элемент `<span>`, идущий сразу после элемента `<strong>`, получил оранжевый цвет текста (`orange`). Заполните оба пропуска.

CSS

input1 input2 input3 {
  color: orange;
}

                     input1 input2 input3 {
  color: orange;
}

HTML

<p>
  Обычный текст, <strong>важный текст</strong>, <span>а этот текст должен стать оранжевым</span>.
</p>

Вам нужно указать оба селектора и соседний комбинатор `+` между ними. Первый селектор - `strong`, второй - `span`.

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

Результат

Сообщения

Выполнить

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

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