Другое

CSS :not() селектор: исключение элементов без классов

Узнайте, как использовать CSS :not() псевдокласс для выбора элементов без определенных классов или атрибутов. Полное руководство с примерами для эффективного стилизации HTML элементов.

Авторы: НейроАгент

Как написать CSS-селектор для выбора элементов, которые НЕ имеют определенного класса или атрибута?

Мне нужно создать CSS-селектор, который нацелен на все элементы без определенного класса. Например, при следующей HTML-структуре:

html
<html class="printable">
    <body class="printable">
        <h1 class="printable">Example</h1>
        <nav>
            <!-- Some menu links... -->
        </nav>
        <a href="javascript:void(0)" onclick="javascript:self.print()">Print me!</a>
        <p class="printable">
            This page is super interesting and you should print it!
        </p>
    </body>
</html>

Я хочу выбрать элементы, которые не имеют класса “printable”, что в данном примере будут элементы <nav> и <a>.

Возможно ли создать такой селектор? Заметьте, что в моей реальной реализации будет значительно больше элементов без класса “printable”, чем с ним.

Псевдокласс :not() CSS является идеальным решением для выбора элементов, которые не имеют определенного класса или атрибута. Вы можете использовать его, чтобы исключить элементы из вашего выбора, указав класс или атрибут, который вы хотите игнорировать. Для вашего примера вы бы использовали :not(.printable), чтобы нацелиться на все элементы, кроме тех, у которых есть класс “printable”.

Содержание

:not() Псевдокласс: синтаксис и основы

Псевдокласс :not() представляет элемент, который не соответствует его аргументу [источник]. Как объясняется на Mozilla Developer Network, этот псевдокласс требует в качестве аргумента CSS-селектор, и селектор будет применять стили ко всем элементам, кроме элементов, указанных в скобках.

Базовый синтаксис соответствует следующему шаблону:

css
селектор:not(игнорируемый-селектор) {
    /* CSS-свойства */
}

Например, чтобы выбрать все абзацы, кроме тех, у которых есть класс “special”:

css
p:not(.special) {
    color: green;
}

Псевдокласс :not() соответствует любому элементу, который НЕ является указанным элементом/селектором [источник]. Это делает его идеальным для вашего случая использования, когда вам нужно выбрать элементы, не имеющие определенного класса.

Выбор элементов без определенного класса

Для вашего конкретного примера с классом “printable” вы бы использовали:

css
:not(.printable) {
    /* CSS-стили для элементов без класса printable */
}

Этот селектор будет соответствовать всем элементам, кроме тех, у которых есть класс “printable”, что в вашей HTML-структуре нацелится на элементы <nav> и <a>, как и требуется.

Вопросы специфичности

Важно отметить, что :not(.printable) имеет ту же специфичность, что и .printable [источник]. Это означает, что если у вас есть конфликтующие стили, правила специфичности работают так, как вы ожидаете - более специфичный селектор побеждает.

Комбинирование с другими селекторами

Вы можете комбинировать :not() с другими селекторами для более точного выбора:

css
nav:not(.printable) {
    /* Только элементы nav без класса printable */
}

body :not(.printable) {
    /* Все элементы внутри body, которые не имеют класса printable */
}

Выбор элементов без определенных атрибутов

Псевдокласс :not() также может работать с селекторами атрибутов, чтобы исключать элементы на основе их атрибутов:

Исключение элементов по наличию атрибута

Чтобы выбрать элементы, у которых нет определенного атрибута:

css
:not([data-hidden]) {
    /* Элементы без атрибута data-hidden */
}

Исключение элементов по значению атрибута

Чтобы выбрать элементы, у которых нет определенного значения атрибута:

css
:not([disabled]) {
    /* Элементы, которые не отключены */
}

:not([href="#"]) {
    /* Элементы без href="#" */
}

Сложные исключения по атрибутам

Вы можете комбинировать несколько условий:

css
:not([class="printable"]):not([data-no-style]) {
    /* Элементы без класса printable и без атрибута data-no-style */
}

Расширенные примеры и варианты использования

Множественные исключения

Вы можете связывать несколько селекторов :not(), чтобы исключить несколько условий:

css
:not(.printable):not(.hidden):not([data-exclude]) {
    /* Элементы без класса printable, без класса hidden и без атрибута data-exclude */
}

Стили по умолчанию с :not()

Распространенный шаблон - установка стилей по умолчанию, а затем использование :not() для их переопределения в конкретных случаях:

css
/* Стили кнопок по умолчанию */
button {
    background: #333;
    color: white;
    border: none;
    padding: 10px 15px;
}

/* Переопределение для кнопок без определенных классов */
button:not(.primary):not(.secondary) {
    background: #666;
}

Практическая реализация для вашего примера

Вот как вы бы реализовали это для вашего сценария печати:

css
/* Скрыть элементы, которые не должны печататься */
.printable {
    display: block;
}

/* Показать элементы, которые должны печататься */
@media print {
    /* Все элементы получают базовые стили печати */
    * {
        margin: 0;
        padding: 0;
    }
    
    /* Переопределение для непечатаемых элементов */
    :not(.printable) {
        display: none !important;
    }
}

Вопросы производительности и специфичности

Влияние на производительность

Хотя :not() в целом эффективен, CodeLucky предупреждает, что сложные отрицания могут влиять на производительность. В вашем случае, когда большинство элементов не имеют класса “printable”, использование :not(.printable) должно быть довольно эффективным.

Правила специфичности

Как объясняет Brett Jankord, псевдокласс :not() имеет ту же специфичность, что и переданный ему селектор. Это означает:

  • :not(.class) имеет ту же специфичность, что и .class
  • :not(div) имеет ту же специфичность, что и div
  • :not([type="text"]) имеет ту же специфичность, что и [type="text"]

Лучшие практики

  1. Используйте простые селекторы внутри :not(): Как отмечает SitePoint, любой аргумент, передаваемый в :not(), должен быть простым селектором, таким как тип элемента, имя класса, ID или другой псевдокласс.

  2. Избегайте сложного вложения: Хотя вы можете вкладывать селекторы, сохраняйте их простыми для лучшей производительности.

  3. Учитывайте соотношение: Поскольку большинство ваших элементов не имеют класса “printable”, использование :not(.printable) более эффективно, чем выбор всех элементов с последующим исключением немногих с классом.

Поддержка браузерами и совместимость

Псевдокласс :not() имеет отличную поддержку браузерами, поддерживаясь во всех современных браузерах с IE9+ [источник]. Согласно W3Schools, числа в их таблице поддержки браузеров указывают на первую версию браузера, которая полностью поддерживает этот псевдокласс.

Для максимальной совместимости учтите следующие моменты:

  • Тестируйте в целевых браузерах
  • Используйте CSS-препроцессоры, если вам нужно поддерживать старые браузеры
  • Рассмотрите альтернативные стили для очень старых браузеров

Источники

  1. Stack Overflow - CSS selector selecting elements NOT having a certain class or attribute
  2. Mozilla Developer Network - :not() CSS pseudo-class
  3. CodeLucky - CSS :not() Pseudo-Class Complete Guide
  4. W3Schools - CSS :not() Pseudo-class
  5. W3C Wiki - CSS/Selectors/pseudo-classes/:not
  6. Brett Jankord - The :not() CSS pseudo-class and specificity
  7. SitePoint - CSS Pseudo-classes: :not() and :target
  8. CSS-Tricks - :not | CSS-Tricks Almanac

Заключение

Псевдокласс :not() CSS является идеальным решением для выбора элементов, которые не имеют определенного класса или атрибута. Для вашего сценария печати использование :not(.printable) будет эффективно нацеливаться на все элементы, кроме тех, у которых есть класс “printable”.

Ключевые выводы:

  • Используйте :not(селектор) для исключения элементов из вашего выбора
  • Синтаксис прост и хорошо работает с классами, атрибутами и другими селекторами
  • Учитывайте производительность при использовании сложных отрицаний, хотя простое использование :not(.class) очень эффективно
  • Поддержка браузерами отличная во всех современных браузерах
  • Правила специфичности работают ожидаемым образом - :not(.class) имеет ту же специфичность, что и .class

Для вашей реализации :not(.printable) является идеальным решением, которое будет эффективно нацеливаться на элементы <nav> и <a> в вашей HTML-структуре, игнорируя все элементы с классом “printable”.

Авторы
НейроАгент
Автор
Проверено модерацией
НейроОтветы
Модерация
CSS :not() селектор: исключение элементов без классов