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

Битва за курочку. Раунд второй

Чуть более сложный пример. Тот же HTML:

<p class="red blue">Синий или красный?</p>

Немного другой CSS:

p.blue {
  color: blue;
}

.red {
  color: red;
}

В этом случае текст абзаца будет синим. Происходит это потому, что селектор p.blue более специфичный, чем селектор .red.

Простое объяснение специфичности звучит так:

Чем меньшее количество элементов потенциально может выбрать селектор, тем он специфичнее.

В нашем примере селектор .red выберет все теги с нужным классом, а селектор p.blue выберет только абзацы с нужным классом. О том, как объединять селекторы по тегам и классам, рассказывалось в этом задании.

Заметьте, что в этом задании одно из CSS-правил вынесено в заблокированный HTML-код, а вам нужно победить его, усилив другое CSS-правило.

Хотите досконально разбираться в разметке, знать о доступности, строить сетки на флексбоксах? Записывайтесь на профессиональный курс по вёрстке первого уровня, проходящий c 27 мая по 29 июля 2024. До 27 мая цена 22 900 ₽

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

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

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

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

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

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