Czy mogę napisać selektor CSS wybierający elementy nie posiadające określonej klasy?

:not([class])

W rzeczywistości wybierze to wszystko, co nie ma zastosowanej klasy css (class="css-selector").

Zrobiłem jsfiddle demo

    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>

Czy to jest obsługiwane? tak : Caniuse.com [dostęp 25 sierpnia 2011] 2014):

• wsparcie: 88.85%
• częściowe poparcie: 4.36%
• razem:93.21%

Funny edit, szukałam w Googlach przeciwieństwa: nie. Negacja CSS?

selector[class]  /* the oposite of :not[]*/

The :not negacja pseudo Klasa

Pseudoklasa negacji CSS, :not(X), jest notacją funkcjonalną biorąc prosty selektor X jako argument. Pasuje do elementu, który nie jest reprezentowany przez argument. X nie może zawierać innego selektor negacji.

Możesz użyć :not, aby wykluczyć dowolny podzbiór dopasowanych elementów, uporządkowany tak, jak normalny selektor CSS.

Prosty przykład: wyłączenie przez Klasa

div:not(.class)

Wybierze wszystkie div elementy bez klasy .class

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

<div>Make me red!</div>
<div class="class">...but not me...</div>

Przykład złożony: wykluczenie według typu / hierarchii

:not(div) > div

Wybierze wszystkie div elementy, które nie są potomkami innych div

div {
  color: black
}
:not(div) > div {
  color: red;
}

<div>Make me red!</div>
<div>
  <div>...but not me...</div>
</div>

Przykład złożony: łańcuchowanie pseudo selektorów

Z wyjątkiem braku możliwości łączenia/zagnieżdżania :not selektorów i pseudo elementy, można używać w połączeniu z innymi pseudo selektorami.

div {
  color: black
}
:not(:nth-child(2)){
  color: red;
}

<div>
  <div>Make me red!</div>
  <div>...but not me...</div>
</div>

Obsługa przeglądarki , itp.

:not jest selektor poziomu CSS3, głównym wyjątkiem pod względem wsparcia jest to, że jest to IE9+

Spec również czyni interesujący punkt:

Pseudo :not() pozwala na pisanie bezużytecznych selektorów. Na instancja :not(*|*), która nie reprezentuje żadnego elementu, lub foo:not(bar), co jest równoważne foo, ale z wyższym specyficzność.

Myślę, że to powinno zadziałać:

:not(.printable)

From " negative css selector " answer .

Po prostu chciałbym dodać, że powyższe odpowiedzi: not() mogą być bardzo skuteczne w kątowych formach, zamiast tworzyć efekty lub dostosowywać widok / DOM,

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

Zapewnia, że podczas ładowania strony pola wejściowe będą wyświetlać nieprawidłowe (czerwone obramowania lub tła itp.) tylko wtedy, gdy mają dodane dane (tzn. nie są już nieskazitelne), ale są nieprawidłowe.

Przykład

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

/ / nieprzezroczystość 0.6 wszystkie " sekcja -", ale nie "nazwa sekcji"

Możesz użyć selektora :not(.class), jak wspomniano wcześniej.

Jeśli zależy ci na kompatybilności z Internet Explorerem, polecam użycie http://selectivizr.com/.

Ale pamiętaj, aby uruchomić go pod apache inaczej nie zobaczysz efektu.

Using the :not() pseudo class:

Do wybierania wszystkiego oprócz określonego elementu (lub elementów). Możemy użyć :not() CSS pseudo class . Pseudo klasa :not() wymaga selektora CSS jako argumentu. Selektor zastosuje style do wszystkich elementów z wyjątkiem elementów, które są określone jako argument.

Przykłady:

/* 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>

Widzimy już potęgę tej pseudo klasy, pozwala nam to wygodnie dostrajamy nasze selektory, wykluczając pewne elementy. Ponadto ta pseudo Klasa zwiększa specyficzność selektora. Na przykład:

/* 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>

Jak mówili inni, po prostu: nie(.klasy). Dla selektorów CSS, polecam odwiedzenie tego linku, to było bardzo pomocne w całej mojej podróży: https://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048

1. X: not (selektor)

   1. div: not (#container) {
   2. color: blue;
   3. }

Pseudo Klasa negacji jest szczególnie pomocna. Powiedzmy, że chcę wybrać wszystkie divy, z wyjątkiem taki, który ma identyfikator kontenera. Powyższy fragment doskonale poradzi sobie z tym zadaniem.

Lub, jeśli chciałem wybrać każdy pojedynczy element (nie zaleca się) z wyjątkiem znaczników akapitu, możemy zrobić:

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