it-swarm.com.ru

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

555
David Nordvall

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

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

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

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

781
BoltClock
: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[]*/
151
Milche Patern

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

98
SW4

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

:not(.printable)

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

19
Eregrith

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

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

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

9
BaneStar007

пример

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

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

4
Hakan

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

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

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

2
MelkorNemesis

Использование псевдо-класса :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
Willem van der Veen