Селекторы классов и идентификаторов: Тренажер CSS

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

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

Список тем

Базовый селектор класса

Измените цвет текста для всех элементов с классом `text-primary` на синий цвет.

CSS

.input1 { 
  color: input2;
}

                     .input1 { 
  color: input2;
}

HTML

<div class="container">
  <p class="text-primary">Это текст с классом text-primary.</p>
  <p>Это обычный текст.</p>
</div>

Для выбора элементов по классу используется символ точки `.` перед именем класса. В данном случае, вам нужно выбрать класс `text-primary` и задать свойство `color` со значением `blue`.

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

Результат

Сообщения

Выполнить

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

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

Базовый селектор идентификатора

Сделайте фон элемента с идентификатором `main-header` светло-серым.

CSS

#input1 { 
  background-color: input2;
}

                     #input1 { 
  background-color: input2;
}

HTML

<div id="main-header">
  <h1>Заголовок страницы</h1>
</div>

Для выбора элемента по идентификатору используется символ решетки `#` перед именем идентификатора. В данном случае, вам нужно выбрать идентификатор `main-header` и задать свойство `background-color` со значением `lightgray`.

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

Результат

Сообщения

Выполнить

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

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

Применение стиля к нескольким классам

Установите размер шрифта 18px и добавьте отступ снизу 10px для всех элементов с классами `text-block` и `large-text`.

CSS

.input1, .input2 { 
  font-size: 18px;
  margin-bottom: input3;
}

                     .input1, .input2 { 
  font-size: 18px;
  margin-bottom: input3;
}

HTML

<div class="content">
  <p class="text-block">Это блок текста.</p>
  <p class="large-text">Это большой текст.</p>
  <div class="text-block">Это еще один блок.</div>
</div>

Вы можете применить одни и те же стили к нескольким классам, перечислив их через запятую. В данном случае, вам нужно выбрать классы `text-block` и `large-text` и задать свойства `font-size` и `margin-bottom`.

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

Результат

Сообщения

Выполнить

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

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

Комбинация класса и тега

Сделайте все абзацы (`p`) с классом `highlight` жирными.

CSS

input1.input2 { 
  font-weight: input3;
}

                     input1.input2 { 
  font-weight: input3;
}

HTML

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

Вы можете уточнить селектор класса, указав перед ним имя тега. В данном случае, вам нужно выбрать только абзацы `<p>`, имеющие класс `highlight`, и задать свойство `font-weight` со значением `bold`.

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

Результат

Сообщения

Выполнить

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

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

Вложенные элементы и классы

Измените цвет фона для всех элементов `span`, которые находятся внутри элемента с классом `container`, на желтый.

CSS

.input1 input2 { 
  background-color: input3;
}

                     .input1 input2 { 
  background-color: input3;
}

HTML

<div class="container">
  <p>Текст в контейнере <span>и span внутри</span>.</p>
  <span>Span вне контейнера.</span>
</div>

Для выбора вложенных элементов используется пробел между селекторами. В данном случае, вам нужно выбрать все `span`, находящиеся внутри элемента с классом `container`, и задать свойство `background-color` со значением `yellow`.

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

Результат

Сообщения

Выполнить

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

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

Специфичность: ID против класса

Сделайте текст элемента с классом `special-text` красным, но так, чтобы стиль применился только к элементу с идентификатором `unique-item`, несмотря на то, что оба элемента имеют класс `special-text`.

CSS

#input1 { 
  color: input2;
}

                     #input1 { 
  color: input2;
}

HTML

<div class="container">
  <p class="special-text" id="unique-item">Этот текст должен быть красным (ID).</p>
  <p class="special-text">Этот текст не должен быть красным (класс).</p>
</div>

Идентификаторы имеют более высокий приоритет, чем классы. Чтобы стиль применялся только к элементу с ID, используйте селектор ID. В данном случае, вам нужно выбрать элемент с идентификатором `unique-item` и задать свойство `color` со значением `red`.

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

Результат

Сообщения

Выполнить

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

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

Цепочка классов

Установите подчеркивание текста для всех элементов с классами `text-style` и `underline`, которые применяются к одному и тому же элементу.

CSS

.input1.input2 { 
  text-decoration: input3;
}

                     .input1.input2 { 
  text-decoration: input3;
}

HTML

<div class="content">
  <p class="text-style underline">Этот текст подчеркнут (оба класса).</p>
  <p class="text-style">Этот текст не подчеркнут (только text-style).</p>
  <p class="underline">Этот текст тоже не подчеркнут (только underline).</p>
</div>

Для выбора элементов, имеющих одновременно несколько классов, используйте цепочку классов, записывая их подряд без пробелов. В данном случае, вам нужно выбрать элементы, имеющие одновременно классы `text-style` и `underline`, и задать свойство `text-decoration` со значением `underline`.

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

Результат

Сообщения

Выполнить

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

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

Селектор потомков с классом

Сделайте все ссылки (`a`) внутри элементов с классом `navigation` синими.

CSS

.input1 input2 { 
  color: input3;
}

                     .input1 input2 { 
  color: input3;
}

HTML

<nav class="navigation">
  <ul>
    <li><a href="#">Главная</a></li>
    <li><a href="#">О нас</a></li>
  </ul>
</nav>
<a href="#">Ссылка вне навигации</a>

Используйте селектор потомков (пробел) для выбора элементов, вложенных в другие элементы. В данном случае, вам нужно выбрать все ссылки `<a>`, которые являются потомками элементов с классом `navigation`, и задать свойство `color` со значением `blue`.

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

Результат

Сообщения

Выполнить

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

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

Селектор дочерних элементов с классом

Сделайте первый абзац (`p`) внутри элемента с классом `article` зеленым.

CSS

.input1 > input2:first-child { 
  color: input3;
}

                     .input1 > input2:first-child { 
  color: input3;
}

HTML

<article class="article">
  <p>Первый абзац в статье.</p>
  <p>Второй абзац в статье.</p>
  <div><p>Абзац внутри div, не должен быть зеленым.</p></div>
</article>

Используйте селектор дочерних элементов (`>`) для выбора элементов, которые являются непосредственными детьми других элементов. В данном случае, вам нужно выбрать первый абзац `<p>`, который является непосредственным ребенком элемента с классом `article`, и задать свойство `color` со значением `green`.

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

Результат

Сообщения

Выполнить

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

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

Универсальный селектор и классы

Сделайте все элементы внутри элемента с классом `section` с размером шрифта 16px.

CSS

.input1 input2 { 
  font-size: input3;
}

                     .input1 input2 { 
  font-size: input3;
}

HTML

<section class="section">
  <h1>Заголовок секции</h1>
  <p>Параграф в секции.</p>
  <ul><li>Элемент списка</li></ul>
</section>
<p>Параграф вне секции.</p>

Универсальный селектор `*` выбирает все элементы. В сочетании с селектором потомков, он позволяет выбрать все элементы, вложенные в другой элемент. В данном случае, вам нужно выбрать все элементы `*`, которые находятся внутри элемента с классом `section`, и задать свойство `font-size` со значением `16px`.

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

Результат

Сообщения

Выполнить

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

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

Применение нескольких стилей к ID

Для элемента с идентификатором `footer` установите цвет фона на `#f0f0f0`, цвет текста на серый и добавьте верхнюю границу толщиной 1px.

CSS

#input1 { 
  background-color: input2;
  color: input3;
  border-top: input4 solid #ccc;
}

                     #input1 { 
  background-color: input2;
  color: input3;
  border-top: input4 solid #ccc;
}

HTML

<footer id="footer">
  <p>© 2023 Мой сайт</p>
</footer>

Вы можете задать несколько стилей для одного селектора, перечисляя свойства и их значения внутри фигурных скобок. В данном случае, вам нужно выбрать элемент с идентификатором `footer` и задать свойства `background-color`, `color` и `border-top`.

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

Результат

Сообщения

Выполнить

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

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