Чи можу я написати селектор CSS для вибору елементів, які НЕ мають певного класу чи атрибута?

644

Я хотів би написати правило 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>

Я хотів би написати селектор , який вибирає всі елементи , які не мають «друк» класу , який, в даному випадку, є нав і через елементи.

Чи можливо це?

ПРИМІТКА: у фактичному HTML, де я хотів би використовувати це, буде набагато більше елементів, у яких немає класу "для друку", ніж у нас (я розумію, що це навпаки у наведеному вище прикладі).

html  css  css-selectors 
— Девід Нордвалл
джерело

Відповіді:

897

Зазвичай ви додаєте селектор класів до :not()псевдокласу так:

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

:not([attribute]) {
    /* Styles */
}

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

Майте на увазі , що в залежності від властивостей ви налаштовуєте в цьому правилі, деякі з них можуть бути або успадковується нащадками , які є .printable або іншим чином вплинути на їх так чи інакше. Наприклад, хоча displayце не успадковується, встановлення display: noneна :not(.printable)заповіт заважає йому та всім його нащадкам відображатися, оскільки він повністю видаляє елемент та його піддерево з верстки. Ви можете часто обійти це, використовуючи visibility: hiddenнатомість, що дозволить показувати видимим нащадкам, але приховані елементи все одно впливатимуть на макет, як це було зроблено спочатку. Словом, просто будьте обережні.

— BoltClock
джерело
4
Як невеликий саморіз інформації, підтримка браузера для медіа-агностичних аспектів CSS часто однакова для всіх типів медіа - якщо браузер не підтримує :not()на екрані, він також не підтримуватиме його у друку.
— BoltClock
19
Зауважте, що використовується :not()лише простий селектор, що означає, що він не може містити вкладених селекторів, наприклад :not(div .printable)- див. Синтаксис W3C Selector
— Steve Eynon
1
Я просто спробував це для .active a: not (.active a) не працював для мене. Але, а: не (. Активно) зробив!
— користувач2367418
Коли ти кажеш, що це не працювало для тебе, ти, мабуть, маєш на увазі, що він не працював для тебе , правда? Це не означає, що це не працює, можливо, це конкретний випадок - властивості у вашому :not(.active)правилі, можливо, були просто замінені властивостями в правилах (іх) з більш високим пріоритетом.
— amn
1
@Kilves: Ви впевнені в цьому? Специфіка :not()аргументу полягає в тому, що його аргумент, який означає :not(div)однаково специфічний для div, :not(.cls)до .clsі :not(#id)до #id.
— BoltClock
179 
:not([class])

Насправді, це вибере все, що не class="css-selector"застосовує до нього клас css ( ).

Я зробив демонстрацію 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 (доступ до 02 січня 2020 року) :

  • Підтримка: 98,74%
  • Часткова підтримка: 0,1%
  • Всього: 98,84%

Смішно редагувати, я гуглив за протилежне: ні. Заперечення CSS?

selector[class]  /* the oposite of :not[]*/
— Мільче Патерн
джерело
109

: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але має більш високу специфічність.

— SW4
джерело
3
Це була вечеря, добре задокументована і добре перевірена відповідь! #thumbsup
— Джонатан Бредо Крістенсен
Гаразд, ваш приклад :not(div) > divпрацював би лише з прямими батьками. Що з іншими дідами?
— FindOut_Quran
Дивовижна інформація! Тільки те, що мені було потрібно! Дякую!
— Джеймі
9

Так само, як зробити внесок у те, що наведені вище відповіді: not () можуть бути дуже ефективними в кутових формах, а не створювати ефекти або коригувати погляд / DOM, 

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

Переконайтеся, що при завантаженні вашої сторінки поля введення показуватимуть недійсні (червоні рамки або фони тощо), лише якщо вони додані дані (тобто більше незаймані), але недійсні.

— BaneStar007
джерело
7

Приклад

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

// Непрозорість 0,6 все "розділ-", але не "ім'я розділу"

— Хакан
джерело
2

Ви можете використовувати :not(.class)селектор, як згадувалося раніше.

Якщо ви дбаєте про сумісність Internet Explorer, рекомендую вам скористатися http://selectivizr.com/ .

Але не забудьте запустити його під апашем, інакше ефект не побачите.

— Мелькорнемезис
джерело
3
Що ви маєте на увазі запустити його під apache? Selectivizr - це передня панель, вона не має нічого спільного з серверним програмним забезпеченням
— Kloar
Він виконує запит ajax - це не працює без http-сервера.
— MelkorNemesis
2

Використання :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

Якщо ви хочете, щоб у конкретному меню класу був специфічний CSS, якщо увійшов клас :

body:not(.logged-in) .menu  {
    display: none
}
— Міхай
джерело
-1

Як казали інші, ви просто сказали: not (.class). Для вибраних CSS я рекомендую відвідати це посилання, це було дуже корисно протягом усієї моєї поїздки: https://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048

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

Особливо корисним є заперечення псевдокласу. Скажімо, я хочу вибрати всі divs, за винятком того, у якого є ідентифікатор контейнера. Розрізаний вище фрагмент прекрасно впорається з цим завданням.

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

*:not(p) {
  color: green;
}
— HBhering
джерело
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.