¿Puedo escribir un selector CSS seleccionando elementos QUE NO tienen una clase determinada?

:not([class])

En realidad, esto seleccionará cualquier cosa que no tenga una clase css (class="css-selector") aplicada a ella.

Hice un 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>

¿Es esto compatible? Sí : Caniuse.com (accessed 25 Aug 2014):

• Soporte: 88.85%
• Soporte parcial: 4.36%
• Total: 93,21%

Divertido editar, yo estaba buscando en Google lo contrario de :no. CSS negación?

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

El :not pseudo clase de negación

La pseudo-clase CSS de negación, :not(X), es una notación funcional tomando un selector simple X como argumento. Coincide con un elemento que no está representado por el argumento. X no debe contener otro selector de negación.

Puede usar :not para excluir cualquier subconjunto de elementos coincidentes, ordenados como lo haría con los selectores CSS normales.

Ejemplo simple: excluir por clase

div:not(.class)

Seleccionaría todos los elementos div sin la clase .class

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

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

Ejemplo complejo: exclusión por tipo / jerarquía

:not(div) > div

Seleccionaría todos los elementos div que no son hijos de otro div

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

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

Ejemplo complejo: encadenamiento de pseudo selectores

Con la notable excepción de no poder encadenar/anidar :not selectores y pseudo elementos, se puede utilizar junto con otros pseudo selectores.

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

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

Soporte del navegador, etc.

:not es un CSS3 selector de nivel, la principal excepción en términos de apoyo es que es IE9+

La especificación también hace un punto interesante:

El pseudo :not() permite escribir selectores inútiles. Para instance :not(*|*), que no representa ningún elemento en absoluto, o foo:not(bar), que es equivalente a foo pero con una mayor especificidad.

Creo que esto debería funcionar:

:not(.printable)

Desde respuesta"selector css negativo" .

Al igual que contribuir que las respuestas anteriores de: not () pueden ser muy eficaces en formas angulares, en lugar de crear efectos o ajustar la vista/DOM,

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

Asegura que al cargar su página, los campos de entrada solo mostrarán los no válidos (bordes o fondos rojos, etc.) si tienen datos agregados (es decir, ya no están prístinos) pero no son válidos.

Ejemplo

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

/ / Opacidad 0.6 todo "sección -" pero no "nombre-de-sección"

Puede usar el selector :not(.class) como se mencionó anteriormente.

Si te importa la compatibilidad con Internet explorer, te recomiendo usar http://selectivizr.com/.

Pero recuerde ejecutarlo bajo apache de lo contrario no verá el efecto.

Usando la pseudo clase :not():

Para seleccionar todo menos un determinado elemento (o elementos). Podemos usar el :not() Pseudo clase CSS . La pseudo clase :not() requiere un selector CSS como argumento. El selector aplicará los estilos a todos los elementos excepto a los elementos que se especifican como argumento.

Ejemplos:

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

Ya podemos ver el poder de esta pseudo clase, nos permite convenientemente multa ajuste nuestros selectores excluyendo ciertos elementos. Además, esta pseudo clase aumenta la especificidad del selector. Por ejemplo:

/* 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 otros dijeron, simplemente pon :no(.clase). Para los selectores CSS, recomiendo visitar este enlace, ha sido muy útil a lo largo de mi viaje: https://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048

1. X: not (selector)

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

La pseudo clase negación es particularmente útil. Digamos que quiero seleccionar todos los divs, a excepción de la uno que tiene un id de contenedor. El fragmento de código anterior manejará esa tarea perfectamente.

O, si quisiera seleccionar cada elemento (no aconsejado) excepto las etiquetas de párrafo, podríamos hacer:

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