Как исключить класс из CSS селектора при hover: пример
Быстрый ответ
При использовании CSS-стилей, чтобы исключить элементы с заданным классом, используйте псевдокласс :not()
. Вот пример данного применения:
.item:not(.skip) {
/* Стили применяются к элементам с классом .item, которые не имеют класса .skip */
}
Так, элементы с классом .item
получат указанные стили, если они не содержат класс .skip
.
Порядок использования селекторов и их переопределение
Будьте аккуратны при комбинировании псевдоклассов с другими селекторами. Правильная последовательность и точность выражения — это ключевые моменты:
/*.reMode_hover:not(.reMode_selected):hover — это корректная последовательность псевдоклассов */
.reMode_hover:not(.reMode_selected):hover {
/* Класс 'reMode_selected' не будет реагировать на наведение курсора */
background-color: #f0ac00;
}
Чтобы предотвратить конфликты со стилями, которые были определены ранее, порой необходимо увеличить специфичность селектора:
/* Это правило будет применено, только если элемент совпадает с обоими классами */
a.reMode_selected.reMode_hover:hover {
/* Стили для данного элемента */
}
Не забывайте проверять на практике все ваши правила, например, с помощью JSFiddle, чтобы избежать непредвиденных результатов.
Эффективность без использования JS
Вместо JavaScript используйте возможности CSS для задания условных стилей. Псевдокласс :not()
позволяет создавать аккуратный и оптимизированный код без ненужной нагрузки на производительность.
Визуализация
Представьте себе волшебный сад:
Сад: 🌷🌻🌼🌷🌹🌻🌼🌷🌹
Включите ваше воображение, чтобы полить все цветы, кроме роз:
/* "Розы останутся без воды!" – говорит селектор */
.flower:not(.rose) { water: 1L; }
В итоге стилями будет достигнуто следующее:
Перед поливом: 🌷🌻🌼🌷🌹🌻🌼🌷🌹
После полива: 💦🌷💦🌻💦🌼💦🌷🌹💦🌻💦🌼💦🌷🌹
Розы (.rose
) остаются сухими, тогда как стили воздействуют на все остальные цветы.
В глубь CSS
Познавайте такие возможности CSS, как :not()
, для создания чистого и эффективного кода. Вот ключевые пункты, которые стоит иметь в виду:
Специфичность и каскадирование стилей
Понимание специфичности в CSS крайне важно. Правильное использование :not()
поможет вам в этом:
/* Запомните этот порядок: идентификаторы, классы, теги */
#id > .class > tag
Совместимость с браузерами
Перед использованием :not()
, обязательно проверьте совместимость с браузерами на Can I Use. Некоторые устаревшие версии браузеров могут не поддерживать сложные селекторы.
Тестирование и проверка
Проверяйте свои CSS-правила, чтобы убедиться в их корректности и получить одобрение от профессионального сообщества разработчиков.
Полезные материалы
- CSS :not() Selector – MDN — Подробное руководство по псевдоклассу :not().
- Понимание псевдокласса :not() – CSS Tricks — Откройте для себя нюансы использования :not().
- Специфичность в CSS – CSS-Tricks — Подробное объяснение важности специфичности при использовании :not().
- CSS Селекторы Справочник – W3Schools — Обширный наставник по CSS-селекторам.
- Учимся CSS :not() псевдоклассу – Codecademy — Усвоение :not() на практике через интерактивные занятия.
- Могу ли я использовать псевдокласс :not() – Can I Use — Проверьте поддержку :not() в различных браузерах.
- Селекторы Уровня 4 — Информация для опытных пользователей о селекторах уровня 4.