[html] ¿Puedo escribir un selector de CSS seleccionando elementos que NO tengan una determinada clase?


Answers

:not([class])

En realidad, esto seleccionará todo lo que no tenga una clase css ( class="css-selector" ) aplicada a él.

Hice una demostración 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>

¿Esto es compatible? Sí: Caniuse.com (consultado el 25 de agosto de 2014) :

  • Soporte: 88.85%
  • Soporte parcial: 4.36%
  • Total: 93.21%

Edición divertida, estaba buscando en Google lo opuesto a: no. Negación de CSS?

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

Me gustaría escribir una regla de selector de CSS que seleccione todos los elementos que no tengan una determinada clase. Por ejemplo, dado el siguiente 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>

Me gustaría escribir un selector que seleccione todos los elementos que no tienen la clase "imprimible" que, en este caso, son el navegador y un elemento.

es posible?

NOTA: en el HTML actual en el que me gustaría usar esto, habrá muchos más elementos que no tienen la clase "imprimible" que los demás (me doy cuenta de que es al revés en el ejemplo anterior).




Ejemplo

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

// Opacidad 0.6 toda "section-" pero no "section-name"




Como otros dijeron, simplemente pones: no (.class). Para los selectores de CSS, recomiendo visitar este enlace, ha sido muy útil durante todo mi viaje: https://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048

  1. X: no (selector)

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

La pseudo clase de negación es particularmente útil. Digamos que quiero seleccionar todos los divs, excepto el que tiene un id. De contenedor. El fragmento anterior manejará esa tarea perfectamente.

O bien, si quisiera seleccionar cada elemento (no recomendado) a excepción de las etiquetas de párrafo, podríamos hacer:

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






Links