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



4 Answers

:not([class])

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

Hice una demo 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) :

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

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

selector[class]  /* the oposite of :not[]*/
html css css-selectors

Me gustaría escribir una regla de selector de CSS que seleccione todos los elementos que no tienen una clase determinada. 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 la navegación y los elementos.

es posible?

NOTA: en el HTML real donde me gustaría usar esto, habrá muchos más elementos que no tienen la clase "imprimible" que la que tengo (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 todo "section-" pero no "section-name"




Usando la :not() pseudo clase: :not() :

Para seleccionar todo menos un determinado elemento (o elementos). Podemos usar la pseudo clase CSS :not() . La pseudo clase :not() requiere un selector de CSS como argumento. El selector aplicará los estilos a todos los elementos excepto a los elementos que se especifican como un 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 ajustar con precisión nuestros selectores al excluir 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>




Related