Общие сиблинги (general sibling selectors): Тренажер CSS

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

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

Список тем

Выбор всех сиблингов-параграфов

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

CSS

h2 input1 p {
  color: red;
}

                     h2 input1 p {
  color: red;
}

HTML

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

Чтобы выбрать все элементы `<p>`, которые являются сиблингами элемента `<h2>` и идут после него, используйте селектор `h2 ~ p`. Заполните пропуск `input1` символом `~`.

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

Результат

Сообщения

Выполнить

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

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

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

Задача: Задайте зеленую рамку всем элементам `<div>` с классом `block`, которые являются сиблингами элемента с ID `trigger` и следуют за ним.

CSS

input1 input2 input3 {
  border: 2px solid green;
  margin-top: 5px;
  padding: 5px;
}

                     input1 input2 input3 {
  border: 2px solid green;
  margin-top: 5px;
  padding: 5px;
}

HTML

<div id="container">
  <p>Какой-то текст</p>
  <div id="trigger">Триггер</div>
  <div class="block">Блок 1 (нужен)</div>
  <p>Параграф</p>
  <div class="block">Блок 2 (нужен)</div>
  <div>Просто div</div>
  <div class="block">Блок 3 (нужен)</div>
</div>

Используйте селектор общих сиблингов (`~`) между селектором по ID (`#trigger`) и селектором по классу (`div.block` или просто `.block`, если другие элементы с этим классом не мешают). Заполните пропуск `input1` селектором `#trigger`, `input2` символом `~`, а `input3` селектором `.block`.

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

Результат

Сообщения

Выполнить

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

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

Изменение фона сиблингов-изображений

Задача: Добавьте светло-серый фон всем изображениям `<img>`, которые следуют за параграфом `<p>` с классом `lead`.

CSS

input1 input2 input3 {
  background-color: lightgray;
  padding: 5px;
  margin-top: 5px;
  display: block; /* Чтобы фон был виден */
}

                     input1 input2 input3 {
  background-color: lightgray;
  padding: 5px;
  margin-top: 5px;
  display: block; /* Чтобы фон был виден */
}

HTML

<div class="content">
  <p class="lead">Ведущий параграф.</p>
  <img src="https://naytikurs.ru/img/1.png" alt="Image 1">
  <p>Обычный параграф.</p>
  <img src="https://naytikurs.ru/img/2.png" alt="Image 2">
  <div>
    <img src="https://naytikurs.ru/img/4.png" alt="Image 3 (внутри div)">
  </div>
  <img src="https://naytikurs.ru/img/5.png" alt="Image 4">
</div>

Чтобы выбрать все изображения (`img`), которые являются сиблингами параграфа с классом `lead` (`p.lead`) и идут после него, используйте комбинатор общих сиблингов (`~`). Заполните `input1` селектором `p.lead`, `input2` символом `~`, а `input3` селектором `img`.

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

Результат

Сообщения

Выполнить

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

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

Стилизация вложенных элементов у сиблингов

Задача: Сделайте текст во всех элементах `<span>` внутри параграфов `<p>`, которые следуют за элементом `hr`, жирным.

CSS

input1 input2 input3 input4 {
  font-weight: bold;
}

                     input1 input2 input3 input4 {
  font-weight: bold;
}

HTML

<div>
  <p>Текст до линии.</p>
  <hr>
  <p>Параграф после линии со <span>span 1</span>.</p>
  <div><p>Параграф не сиблинг hr, <span>span 2</span>.</p></div>
  <p>Еще параграф после линии со <span>span 3</span>.</p>
</div>

Сначала выберите все параграфы `<p>`, которые являются сиблингами `hr` и следуют за ним (`hr ~ p`). Затем, используя селектор потомка (пробел), выберите элементы `<span>` внутри этих параграфов. Заполните `input1` селектором `hr`, `input2` символом `~`, `input3` селектором `p`, а `input4` селектором `span`.

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

Результат

Сообщения

Выполнить

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

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

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

Задача: Скройте все элементы `<li>`, которые следуют за элементом `<li>` с классом `last-visible` внутри списка `<ul>`.

CSS

input1 input2 input3 {
  input4: none;
}

                     input1 input2 input3 {
  input4: none;
}

HTML

<ul>
  <li>Пункт 1</li>
  <li>Пункт 2</li>
  <li class="last-visible">Пункт 3 (последний видимый)</li>
  <li>Пункт 4 (скрыть)</li>
  <li>Пункт 5 (скрыть)</li>
</ul>

Используйте селектор общих сиблингов (`~`) для выбора всех `<li>`, идущих после `li.last-visible`. Чтобы скрыть элементы, используйте свойство `display` со значением `none`. Заполните `input1` селектором `li.last-visible`, `input2` символом `~`, `input3` селектором `li`, а `input4` свойством `display`.

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

Результат

Сообщения

Выполнить

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

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

Комбинация с псевдоклассом :checked

Задача: Когда чекбокс с ID `toggle` отмечен, измените цвет текста всех следующих за ним сиблингов-параграфов `<p>` на синий.

CSS

input1:input2 input3 input4 {
  color: blue;
}

                     input1:input2 input3 input4 {
  color: blue;
}

HTML

<div>
  <input type="checkbox" id="toggle">
  <label for="toggle">Включить синий текст</label>
  <p>Этот параграф изменит цвет.</p>
  <div>Блок между</div>
  <p>Этот параграф тоже изменит цвет.</p>
  <span>Этот span не изменит цвет.</span>
</div>

Используйте псевдокласс `:checked` для выбора отмеченного чекбокса (`#toggle:checked`), а затем селектор общих сиблингов (`~`) для выбора следующих параграфов (`p`). Заполните `input1` селектором `#toggle`, `input2` псевдоклассом `:checked`, `input3` символом `~`, а `input4` селектором `p`.

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

Результат

Сообщения

Выполнить

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

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

Выбор сиблинга по типу input

Задача: Добавьте верхний отступ в 10px ко всем текстовым полям ввода (`<input type="text">`), которые следуют за элементом `label`.

CSS

input1 input2 input3 {
  margin-top: 10px;
  display: block; /* Для наглядности отступа */
}

                     input1 input2 input3 {
  margin-top: 10px;
  display: block; /* Для наглядности отступа */
}

HTML

<form>
  <label for="name">Имя:</label>
  <input type="text" id="name">

  <label for="email">Email:</label>
  <input type="email" id="email">

  <label for="subject">Тема:</label>
  <input type="text" id="subject">
</form>

Используйте селектор `label`, комбинатор общих сиблингов (`~`) и селектор атрибута `input[type="text"]` для выбора нужных полей ввода. Заполните `input1` селектором `label`, `input2` символом `~`, а `input3` селектором `input[type="text"]`.

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

Результат

Сообщения

Выполнить

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

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

Стилизация заголовков после изображения

Задача: Подчеркните все заголовки `<h3>`, которые являются сиблингами изображения `<img>` с классом `separator` и следуют за ним.

CSS

input1 input2 input3 {
  input4: underline;
}

                     input1 input2 input3 {
  input4: underline;
}

HTML

<div>
  <h2>Основной заголовок</h2>
  <img src="https://naytikurs.ru/img/7.png" class="separator" alt="Separator">
  <h3>Подзаголовок 1 (подчеркнуть)</h3>
  <p>Текст...</p>
  <h3>Подзаголовок 2 (подчеркнуть)</h3>
  <img src="https://naytikurs.ru/img/8.png" alt="Another image">
  <h3>Подзаголовок 3 (не подчеркивать)</h3>
</div>

Используйте селектор для изображения с классом (`img.separator`), комбинатор общих сиблингов (`~`) и селектор заголовка (`h3`). Чтобы добавить подчеркивание, используйте свойство `text-decoration` со значением `underline`. Заполните `input1` селектором `img.separator`, `input2` символом `~`, `input3` селектором `h3`, а `input4` свойством `text-decoration`.

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

Результат

Сообщения

Выполнить

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

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

Изменение стиля сиблингов при наведении

Задача: Когда курсор мыши находится над элементом `<div>` с классом `hover-trigger`, измените цвет фона всех следующих за ним сиблингов `<p>` на светло-желтый.

CSS

input1:input2 input3 input4 {
  background-color: lightyellow;
}

                     input1:input2 input3 input4 {
  background-color: lightyellow;
}

HTML

<div>
  <div class="hover-trigger" style="padding: 10px; border: 1px solid #ccc; cursor: pointer;">Наведи на меня</div>
  <p>Параграф 1</p>
  <span>Промежуточный элемент</span>
  <p>Параграф 2</p>
</div>

Используйте псевдокласс `:hover` на элементе-триггере (`div.hover-trigger:hover`), затем комбинатор общих сиблингов (`~`) и селектор целевых параграфов (`p`). Заполните `input1` селектором `div.hover-trigger`, `input2` псевдоклассом `:hover`, `input3` символом `~`, а `input4` селектором `p`.

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

Результат

Сообщения

Выполнить

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

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

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

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

CSS

input1 input2 input3 {
  border-left: 3px solid orange;
  margin-left: 5px;
  padding-left: 5px;
  margin-top: 5px;
}

                     input1 input2 input3 {
  border-left: 3px solid orange;
  margin-left: 5px;
  padding-left: 5px;
  margin-top: 5px;
}

HTML

<div>
  <h2>Заголовок</h2>
  <div>Блок 1 (нужна граница)</div>
  <p>Параграф 1 (не нужна граница)</p>
  <span>Span (нужна граница)</span>
  <p>Параграф 2 (не нужна граница)</p>
  <ul><li>Список (нужна граница)</li></ul>
</div>

Используйте селектор `h2`, комбинатор общих сиблингов (`~`), универсальный селектор (`*`) и псевдокласс `:not(p)` для исключения параграфов. Заполните `input1` селектором `h2`, `input2` символом `~`, а `input3` селектором `*:not(p)`.

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

Результат

Сообщения

Выполнить

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

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

Стилизация активной ссылки и её сиблингов

Задача: Когда ссылка с классом `active` активна (нажата), сделайте текст всех следующих за ней элементов `span` наклонным.

CSS

input1:input2 input3 input4 {
  input5: italic;
}

                     input1:input2 input3 input4 {
  input5: italic;
}

HTML

<nav>
  <a href="#" class="active">Активная ссылка</a>
  <span>Элемент 1</span>
  <a href="#">Другая ссылка</a>
  <span>Элемент 2</span>
  <span>Элемент 3</span>
</nav>

Используйте псевдокласс `:active` на ссылке (`a.active:active`), комбинатор общих сиблингов (`~`) и селектор `span`. Для наклонного текста используйте свойство `font-style` со значением `italic`. Заполните `input1` селектором `a.active`, `input2` псевдоклассом `:active`, `input3` символом `~`, `input4` селектором `span`, а `input5` свойством `font-style`.

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

Результат

Сообщения

Выполнить

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

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

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

Задача: Измените стиль шрифта на моноширинный для всех элементов `<code>`, которые следуют за элементом `<pre>` с атрибутом `data-lang="javascript"`.

CSS

input1 input2 input3 {
  input4: monospace;
  background: #eee;
  padding: 2px 4px;
}

                     input1 input2 input3 {
  input4: monospace;
  background: #eee;
  padding: 2px 4px;
}

HTML

<div>
  <pre data-lang="javascript">var x = 10;</pre>
  <code>let y = 20;</code>
  <p>Параграф</p>
  <code>const z = 30;</code>
  <pre data-lang="css">body { color: red; }</pre>
  <code>color: blue;</code>
</div>

Используйте селектор атрибута для выбора элемента `<pre>` (`pre[data-lang="javascript"]`), комбинатор общих сиблингов (`~`) и селектор `code`. Для моноширинного шрифта используйте свойство `font-family` со значением `monospace`. Заполните `input1` селектором `pre[data-lang="javascript"]`, `input2` символом `~`, `input3` селектором `code`, а `input4` свойством `font-family`.

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

Результат

Сообщения

Выполнить

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

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