Могу ли я написать селектор 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", в данном случае это nav и a элементы.

Это возможно?

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

Источник

9 ответов

Решение

Обычно вы добавляете селектор класса в :not() псевдокласс вроде так:

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

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

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

Источник 
: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>

Это поддерживается? Да: Caniuse.com (по состоянию на 25 августа 2014 г.):

  • Поддержка: 88,85%
  • Частичная поддержка: 4,36%
  • Итого:93,21%

Забавно редактировать, я гуглил по противоположности: нет. CSS отрицание?

selector[class]  /* the oposite of :not[]*/
Источник

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

Псевдокласс CSS отрицания, :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>

Сложный пример: исключение по типу / иерархии

:not(div) > div

Выбрал бы все div элементы, которые не являются детьми другого div

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

Сложный пример: цепочка псевдоселекторов

С заметным исключением невозможности цепочки / гнезда :not селекторы и псевдоэлементы, которые вы можете использовать в сочетании с другими псевдо селекторами.

div {
  color: black
}
:not(:nth-child(2)){
  color: red;
}
<div>
  <div>Make me red!</div>
  <div>...but not me...</div>
</div>

Поддержка браузера и т. Д.

:not это селектор уровня CSS3, главное исключение с точки зрения поддержки - это IE9+

Спецификация также делает интересный момент:

:not() псевдо позволяет писать бесполезные селекторы. Например :not(*|*), который не представляет элемент вообще, или foo:not(bar), что эквивалентно foo но с более высокой специфичностью.

Источник

Я думаю, что это должно работать:

:not(.printable)

От "отрицательного селектора CSS" ответ.

Источник

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

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

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

Источник

пример

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

// Непрозрачность 0.6 все "section-", но не "section-name"

Источник

Если вы хотите, чтобы в меню определенного класса был определенный CSS, если отсутствует вход в класс:

body:not(.logged-in) .menu  {
    display: none
}
Источник

С использованием :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>

Мы уже можем видеть мощь этого псевдокласса, он позволяет нам удобно точно настраивать наши селекторы, исключая определенные элементы. Кроме того, этот псевдокласс повышает специфичность селектора. Например:

/* This selector has a higher specificity than the #foo below */
#foo:not(#bar) {
  color: red;
}

/* This selector is lower in the cascade but is overruled by the style above */
#foo {
  color: green;
}
<div id="foo">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div>

Источник

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

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

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

Источник

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

  1. Х: нет (селектор)

    1. div: not (#container) {
    2. цвет синий;
    3. }

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

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

1. *:not(p) {
2. color: green;
3. }
Источник
Другие вопросы по тегам