Как эффективно использовать возможности CSS-селекторов?

Псевдокласс :not() позволяет задавать множественные условия для исключения элементов, комбинируя различные селекторы через запятую. Это дает гибкость в стилизации, позволяя, например, применять стили ко всем элементам, кроме тех, у которых есть определённый класс или которые являются первыми в своем роде.
Как эффективно использовать возможности CSS-селекторов?
Изображение носит иллюстративный характер

Псевдокласс :has() не только определяет наличие элемента внутри другого, но и поддерживает логические операции ИЛИ и И. Разделяя селекторы запятой внутри :has(), мы задаем условие ИЛИ, в то время как последовательное использование нескольких :has() создает условие И.

Специфичность CSS-правил с :has() зависит от самого приоритетного селектора внутри него. Этот эффект можно использовать для увеличения приоритета правила, даже при указании несуществующего селектора, но это скорее хак, чем рекомендуемая практика.

Свойство user-select не ограничивается отменой выделения текста, значение all позволяет выделять элементы целиком, включая окружающий их текст, что полезно, например, при копировании блоков кода с синтаксическими скобками.


Новое на сайте