Иногда самая тривиальная задача — задать стиль для p внутри header — перерастает в бесконечную гонку селекторов. Вы пишете
header p { … }, кто-то добавляет .text { … }, вы усложняете селекторы, и проект медленно погружается в «адские» веса CSS. 😞 К счастью, есть аккуратный и очень полезный приём — использовать :where()🧩 Что делает :where():
:where() — это CSS-псевдокласс, который принимает список селекторов и всегда имеет нулевую специфичность, независимо от того, что внутри.
💡 Это значит: даже если вы положите внутрь
#id .class element, итоговый «вес» всё равно ноль — для всей конструкции :where().🔍 Небольшое напоминание про специфичность:
Специфичность
— это вес селектора. Упрощённо: inline > ID > класс/псевдокласс > элементы / псевдоэлементы.
Её используют алгоритмы CSS для выбора победителя при конфликте:
⏺️
p → специфичность (0,0,0,1)⏺️
:where(header) p → :where(header) даёт 0, p даёт 1 → итог (0,0,0,1)⏺️
header p → header + p → (0,0,0,2) — уже селектор тяжелее➡️
p и :where(header) p имеют одинаковую специфичность — при конфликте побеждает правило, объявлённое позже.Как итог, используйте
:where() кконтекстное правило по умолчанию без повышения специфичности: reset/normalize, базовая типографика, умолчания внутри layout-контейнеров. Это позволяет задавать нужный контекст, не ломая каскад и не раздувая селекторы. 👍