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

Я хотел бы написать правило селектора CSS, которое выбирает все элементы, которые не имеют определенного класса. Например, учитывая следующий 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 interresting and you should print it!
        </p>
    </body>
</html>

Я бы хотел написать селектор, который выбирает все элементы, у которых нет класса "printable", который в этом случае является навигацией и элементами.

Возможно ли это?

ПРИМЕЧАНИЕ. В фактическом HTML, где я хотел бы использовать это, будет намного больше элементов, у которых нет класса "printable", чем do (я понимаю это наоборот в приведенном выше примере).

Ответы

Ответ 1

Обычно вы добавляете селектор классов в псевдо-класс :not() следующим образом:

:not(.printable) {
    /* Styles */
}

Но если вам нужна лучшая поддержка браузера (IE8 и старше не поддерживают :not()), вам, вероятно, лучше создавать правила стиля для элементов, которые имеют класс "printable". Если даже это невозможно, несмотря на то, что вы говорите о своей фактической разметке, вам, возможно, придется работать с разметкой вокруг этого ограничения.

Имейте в виду, что в зависимости от свойств, которые вы устанавливаете в этом правиле, некоторые из них могут быть наследованы потомками, которые являются .printable, или иным образом влияют на них так или иначе. Например, хотя display не наследуется, установка display: none на :not(.printable) предотвратит его отображение и все его потомки, поскольку он полностью удаляет элемент и его поддерево из макета. Вы можете часто обойти это, используя вместо этого visibility: hidden, который позволит показывать видимым потомкам, но скрытые элементы все равно будут влиять на макет, как они изначально сделали. Короче говоря, будьте осторожны.

Ответ 2

:not([class])

Фактически, это выберет все, к чему не применен класс css (class="css-selector").

Я сделал демо jsfiddle

    h2 {color:#fff}
    :not([class]) {color:red;background-color:blue}
    .fake-class {color:green}
    <h2 class="fake-class">fake-class will be green</h2>
    <h2 class="">empty class SHOULD be white</h2>
    <h2>no class should be red</h2>
    <h2 class="fake-clas2s">fake-class2 SHOULD be white</h2>
    <h2 class="">empty class2 SHOULD be white</h2>
    <h2>no class2 SHOULD be red</h2>

Ответ 3

:not псевдо-класс отрицания

Псевдокласс класса negation, :not(X), является функциональной нотацией используя простой селектор X в качестве аргумента. Он соответствует элементу, который не представлен аргументом. X не должен содержать другого селектор отрицания.

Вы можете использовать :not, чтобы исключить любое подмножество согласованных элементов, упорядоченное так же, как обычные курсоры CSS.

Простой пример: исключение по классу

div:not(.class)

Выберет все div элементы без класса .class

div:not(.class) {
  color: red;
}
<div>Make me red!</div>
<div class="class">...but not me...</div>

Ответ 5

Точно так же, как вносить вклад в то, что приведенные выше ответы: not() могут быть очень эффективными в формах angular, а не создавать эффекты или настраивать представление /DOM,

input.ng-invalid:not(.ng-pristine) { ... your css here i.e. border-color: red; ...}

Обеспечивает, чтобы при загрузке вашей страницы поля ввода отображали недействительные (красные границы или фон и т.д.), если у них есть добавленные данные (т.е. более нетронутые), но являются недопустимыми.

Ответ 6

Пример

  [class*='section-']:not(.section-name) {
    @include opacity(0.6);
    // Write your css code here
  }

//Opacity 0.6 all "section-", но не "section-name"

Ответ 7

Вы можете использовать селектор :not(.class), как упоминалось ранее.

Если вы заботитесь об совместимости Internet Explorer, я рекомендую вам использовать http://selectivizr.com/.

Но не забудьте запустить его под apache, иначе вы не увидите эффект.

Ответ 8

Использование псевдокласса :not():

Для выбора всего, кроме определенного элемента (или элементов). Мы можем использовать псевдокласс :not() CSS. Псевдокласс :not() требует использования CSS селектора в качестве аргумента. Селектор будет применять стили ко всем элементам, кроме элементов, указанных в качестве аргумента.

Примеры:

/* This query selects All div elements except for   */
div:not(.foo) {
  background-color: red;
}


/* Selects all hovered nav elements inside section element except
   for the nav elements which have the ID foo*/
section nav:hover:not(#foo) {
  background-color: red;
}


/* selects all li elements inside an ul which are not odd */
ul li:not(:nth-child(odd)) { 
  color: red;
}
<div>test</div>
<div class="foo">test</div>

<br>

<section>
  <nav id="foo">test</nav>
  <nav>Hover me!!!</nav>
</section>
<nav></nav>

<br>

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

Ответ 9

Как говорили другие, вы просто сказали: нет (.class). Для селекторов CSS я рекомендую посетить эту ссылку, она была очень полезна на протяжении всего моего путешествия: https://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048

div:not(.success) {
  color: red;
}

Псевдокласс отрицания особенно полезен. Допустим, я хочу выбрать все div, кроме той, которая имеет идентификатор контейнера. Приведенный выше фрагмент отлично справится с этой задачей.

Или, если бы я хотел выбрать каждый элемент (не рекомендуется), кроме тегов абзаца, мы могли бы сделать:

*:not(p) {
  color: green;
}