• Теория
  • Теория

Отрабатываем селекторы по классам

Синтаксис CSS позволяет выбирать элементы не только по одному классу или тегу. Можно, например, выбрать элемент одновременно по тегу и по классу или же элемент с двумя классами сразу. Для этого селектор составляется просто одной строкой из всех желаемых «частей» без пробелов. Давайте рассмотрим примеры.

В селекторе по тегу и классу первым пишется название тега, а потом идёт класс:

<ul class="target"></ul>
ul.target {...} /* выбор всех тегов ul с классом target */

Если у элемента задано несколько классов, в HTML и в CSS-селекторе они могут идти в разном порядке — это не будет влиять на выборку элементов:

<span class="text green"></span>
<p class="green text"></p>
.text.green {...} /* выбор элементов с двумя классами: text и green */

Количество классов в селекторе может быть любым:

<span class="underlined red big text"></span>
span.underlined.red.big.text {...} /* выбор тегов span с четырьмя классами: underlined, red, big и text */

В этой части ваша задача — раскрашивать мишени в определённые цвета, применяя подходящие селекторы.

Всего будет три типа выстрелов в мишень, каждому из которых соответствует свой цвет:

  1. Мишень закрыта — background-color: white;

  2. Выстрел мимо — background-color: red;

  3. Ошибка техники (попадание есть, но мишень не закрылась) — background-color: yellow;

Потренируемся использовать классы.

Минимальный вид табов
  • index.html
HTML
HTML

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
Бабушка Кекс

Притормози, дружище

Проходить вызовы части «Селекторы. Знакомство» тренажёра «Базовые механики стилизации» можно после регистрации и оформления подписки.

Зарегистрироваться