Групповые селекторы: Тренажер CSS

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

В этом уроке вы познакомитесь с групповыми селекторами CSS. Групповые селекторы позволяют применять одни и те же стили к нескольким элементам HTML одновременно, что делает ваш код более компактным и читаемым. Вам предстоит модифицировать CSS-код, используя групповые селекторы, чтобы добиться желаемого визуального результата. Внимательно читайте описания заданий и не забывайте, что вы можете использовать подсказки, если возникнут трудности.

Список тем

Группировка селекторов

Задайте одинаковый цвет текста (синий) для заголовков h1, h2 и h3, используя групповой селектор. Вам нужно объединить селекторы, чтобы применить стиль ко всем трем элементам одновременно.

CSS

input1 {
  color: blue;
}

                     input1 {
  color: blue;
}

HTML

<h1>Заголовок 1</h1>
<h2>Заголовок 2</h2>
<h3>Заголовок 3</h3>
<p>Абзац текста</p>

Чтобы сгруппировать селекторы, перечислите их через запятую. Например: `h1, h2, h3 { ... }`

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

Результат

Сообщения

Выполнить

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

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

Группировка и вложенность

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

CSS

input1 {
  color: red;
}

                     input1 {
  color: red;
}

HTML

<div class="container">
  <p>Параграф 1</p>
  <ul>
    <li>Элемент списка 1</li>
    <li>Элемент списка 2</li>
  </ul>
</div>
<p>Параграф вне контейнера</p>

Используйте групповой селектор, указав родительский элемент, а затем через запятую перечислите дочерние элементы, к которым нужно применить стиль. Например: `.container p, .container li { ... }`

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

Результат

Сообщения

Выполнить

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

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

Разные селекторы в группе

Установите зеленый цвет фона для заголовка h1, всех элементов с классом "highlight" и параграфа с id "special". Используйте группировку селекторов для достижения этого результата.

CSS

input1 {
  background-color: green;
}

                     input1 {
  background-color: green;
}

HTML

<h1>Заголовок</h1>
<p class="highlight">Параграф с классом</p>
<div class="highlight">Блок с классом</div>
<p id="special">Параграф с id</p>

Вы можете группировать селекторы разных типов (тег, класс, идентификатор), перечисляя их через запятую.

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

Результат

Сообщения

Выполнить

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

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

Группировка с общим предком

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

CSS

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

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

HTML

<p>Текст с <span>выделенным</span> фрагментом.</p>
<div>Еще текст с <span>другим выделенным</span> фрагментом.</div>

Можно сгруппировать селекторы, имеющие общего предка. Вместо `p span, div span` можно написать `p, div { span { ... } }`

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

Результат

Сообщения

Выполнить

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

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

Комбинирование группировки и наследования

Сделайте весь текст внутри элементов с классом "info" и "warning" синим и курсивным (font-style: italic).

CSS

.info, input1 {
  color: blue;
  input2: italic;
}

                     .info, input1 {
  color: blue;
  input2: italic;
}

HTML

<div class="info">Информация: <span>важная</span> деталь.</div>
<div class="warning">Предупреждение: <span>будьте</span> осторожны.</div>

Можно сгруппировать селекторы, а затем применить стили, которые будут наследоваться всеми дочерними элементами.

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

Результат

Сообщения

Выполнить

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

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

Группировка с псевдоклассами

При наведении курсора на ссылки (элементы `<a>`) внутри элементов с классом "nav" и "footer", измените их цвет на оранжевый.

CSS

input1  {
  color: orange;
}

                     input1  {
  color: orange;
}

HTML

<div class="nav"><a href="#">Ссылка 1</a></div>
<div class="footer"><a href="#">Ссылка 2</a></div>
<div><a href="#">Ссылка 3</a></div>

Псевдоклассы, такие как :hover, также можно использовать в групповых селекторах.

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

Результат

Сообщения

Выполнить

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

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

Группировка с псевдоэлементами

Добавьте красную точку (•) перед каждым элементом списка (`<li>`) и перед каждым параграфом (`<p>`), используя псевдоэлемент `::before`.

CSS

input1 {
 content: "•";
 color: red; 
}

                     input1 {
 content: "•";
 color: red; 
}

HTML

<ul>
 <li>Элемент 1</li>
 <li>Элемент 2</li>
</ul>
<p>Параграф 1</p>
<p>Параграф 2</p>

Псевдоэлементы, такие как ::before и ::after, также можно использовать в групповых селекторах.

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

Результат

Сообщения

Выполнить

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

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

Сложная группировка

Сделайте фон желтым для: всех заголовков (`<h1>`, `<h2>`), всех элементов с классом `.note` и первого дочернего элемента (`:first-child`) внутри блока с классом `.container`.

CSS

input1, input2, input3 {
  background-color: yellow;
}

                     input1, input2, input3 {
  background-color: yellow;
}

HTML

<div class="container">
  <div>Первый дочерний</div>
  <div>Второй дочерний</div>
</div>
<h1>Заголовок 1</h1>
<h2>Заголовок 2</h2>
<p class="note">Примечание</p>

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

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

Результат

Сообщения

Выполнить

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

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