Урок 11. Решения: Селекторы CSS

📁 Раздел: Основы CSS ⏱️ Время изучения: ~40 мин 🎯 Сложность: Начальная
#p #h1 #a #li #button #input

⚡ Кратко

Сверяйтесь с решениями после собственной попытки, иначе практика превращается в чтение.

Разбор заданий

Задание 2–3. Класс .card и модификатор .important

Базовый класс задаёт общее оформление, второй класс на том же элементе — отличие. В превью третья карточка имеет оба класса class="card important" и выделена.

.card
.card
.card .important — выделена ✓
<div class="card">…</div>
<div class="card">…</div>
<div class="card important">…</div>
.card { border: 2px solid #d1d5db; }
.important {
  border-color: #ea580c;
  background: #fff7ed;
}

Задание 5. Только пункты первого уровня через >

Селектор .menu > li подсвечивает только прямых детей меню. Вложенный li в подсписке остаётся нетронутым.

  • Пункт 1 — выбран ✓
    • Вложенный — пропущен (не прямой ребёнок)
  • Пункт 2 — выбран ✓
.menu > li {
  background: #fef08a;
  border: 2px solid #ca8a04;
}

Как проверять себя

  1. Для повторяемого оформления используйте классы, а не id.
  2. Если правило не сработало, проверьте точку перед именем класса.
  3. Для элемента с двумя классами пишите class="card important".
  4. Состояние :focus-visible нужно для пользователей клавиатуры.
Критерий готовности: вы можете изменить пример под новую задачу и объяснить, почему результат изменился.