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

9 ответов


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

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

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

имейте в виду, что в зависимости от свойства, которые вы устанавливаете в этом правиле, некоторые из них могут быть унаследованы потомками, которые are .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%

смешное редактирование, я был Googling для противоположности: нет. Отрицание 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>

Поддержка Браузеров, etc.

:not это уровень с помощью CSS3 селектор, основным исключением с точки зрения поддержки является то, что это IE9+

в spec также делает интересный момент:

the :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 все " раздел -", но не "раздел-имя"


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

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

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


С помощью :not() псевдо-класс:

для выбора всего, кроме определенного элемента (или элементов). Мы можем использовать :not() в CSS псевдо-класс. The :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>

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

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

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

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

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

1. *:not(p) {
2. color: green;
3. }