Как исключить класс из 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-правила, чтобы убедиться в их корректности и получить одобрение от профессионального сообщества разработчиков.

Полезные материалы

1. CSS :not() Selector – MDN — Подробное руководство по псевдоклассу :not().
2. Понимание псевдокласса :not() – CSS Tricks — Откройте для себя нюансы использования :not().
3. Специфичность в CSS – CSS-Tricks — Подробное объяснение важности специфичности при использовании :not().
4. CSS Селекторы Справочник – W3Schools — Обширный наставник по CSS-селекторам.
5. Учимся CSS :not() псевдоклассу – Codecademy — Усвоение :not() на практике через интерактивные занятия.
6. Могу ли я использовать псевдокласс :not() – Can I Use — Проверьте поддержку :not() в различных браузерах.
7. Селекторы Уровня 4 — Информация для опытных пользователей о селекторах уровня 4.