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

Я хотел бы написать правило селектора 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-коде, где я хотел бы использовать это, будет многобольше элементов, которые не имеют класс "printable", чем у меня (я понимаю, что в приведенном выше примере все наоборот).

Ответы [ 9 ]

791 голосов
/ 02 февраля 2012

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

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

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

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

152 голосов
/ 05 марта 2014
: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[]*/
99 голосов
/ 02 января 2015

Псевдокласс отрицания :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, но с более высокой специфичностью.

20 голосов
/ 02 февраля 2012

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

:not(.printable)

От отрицательный ответ css selector .

9 голосов
/ 06 апреля 2016

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

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

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

4 голосов
/ 21 сентября 2016

Пример

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

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

2 голосов
/ 09 сентября 2013

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

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

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

1 голос
/ 18 сентября 2018

Использование псевдокласса :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>
0 голосов
/ 12 декабря 2017

Как говорили другие, вы просто сказали: нет (.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;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...