Posso escrever um selector de CSS a seleccionar elementos que não tenham uma determinada classe?

:not([class])

Na verdade, isto irá seleccionar qualquer coisa que não tenha uma classe css (class="css-selector") aplicada a ela.

Fiz uma demonstraçãojsfiddle

    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>

Isto é suportado? Sim . Caniuse.com (accessed 25 Ago 2014):

Suporte: 88, 85%
• suporte parcial: 4, 36%
• Total: 93,21%

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

:not pseudo-classe de negação

A negação da pseudo-classe CSS, :not(X), é uma notação funcional. tomando um selector X simples como argumento. Corresponde a um elemento que não é representado pelo argumento. X não deve conter outro selector de negação.

Pode usar :not para excluir qualquer subconjunto de elementos correspondentes, ordenados de acordo com o que faria com os selectores de CSS normais.

Exemplo simples: excluindo por classe

div:not(.class)

Seleccionaria todos os elementos div sem a classe .class

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

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

Exemplo complexo: excluindo por tipo / hierarquia

:not(div) > div

Seleccionaria todos os elementos div que não são filhos de outro div

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

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

Exemplo complexo: acorrentar pseudo-selectores

Com a notável excepção de não sendo capaz de chain / nest :not selectores e pseudo-elementos, você pode usar em conjunto com outros pseudo-selectores.

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

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

Suporte do navegador, etc.

:not é um CSS3 nível seletor, a principal excepção, em termos de suporte é que é IE9+

A especificação também faz um ponto interessante:

O pseudo permite que os selectores inúteis seja escrito. Para instância :not(*|*), que não representa nenhum elemento, ou foo:not(bar), o que é equivalente a foo mas com um especificidade.

:not(.printable)

De "selector CSS negativo" resposta .

Apenas gostaria de contribuir para que as respostas acima de: not() podem ser muito eficazes em formas angulares, em vez de criar efeitos ou ajustar a vista/DOM,

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

Garante que ao carregar a sua página, os campos de entrada só irão mostrar o inválido (contornos vermelhos ou fundos, etc.) se tiverem Dados adicionados (ou seja, já não estão intactos) mas são inválidos.

Exemplo

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

/ / opacidade 0, 6 toda a "secção-" mas não"secção-nome"

Pode utilizar :not(.class) o selector tal como mencionado anteriormente.

Se se preocupa com a compatibilidade com o Internet explorer, recomendo que use http://selectivizr.com/.

Usando a pseudo classe :not():

Para seleccionar tudo menos um determinado elemento (ou elementos). Podemos usar o :not() pseudo classe css . A pseudo classe :not() requer um selector CSS como argumento. O selector irá aplicar os estilos a todos os elementos, exceto para os elementos que são especificados como um argumento.

Exemplos:

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

Como outros disseram, você simplesmente colocou: não(.classe). Para selectores CSS, eu recomendo visitar este link, tem sido muito útil ao longo da minha viagem: https://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048

1. X: não (selector)

   1. div: não (#contentor) {
   2. Cor: Azul;
   3. }

Ou, se eu quisesse seleccionar todos os elementos (não aconselhados) excepto as marcas do parágrafo, poderíamos fazer:

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