1.3Kпросмотров
43.6%от подписчиков
2 февраля 2026 г.
Score: 1.5K
«Хочу стиль для p в header, но не хочу повышать специфичность» 😎 Иногда самая тривиальная задача — задать стиль для 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-контейнеров. Это позволяет задавать нужный контекст, не ломая каскад и не раздувая селекторы. 👍