html - pseudo - selectores css avanzados
¿Puedo escribir un selector de CSS seleccionando elementos que NO tengan una clase determinada? (9)
La pseudo clase de :not negación.
La pseudo-clase CSS de negación,:
:not(X), es una notación funcional que toma un simple selector 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 :not excluir ningún subconjunto de elementos coincidentes, ordenados como lo haría con los selectores de CSS normales.
Ejemplo simple: excluyendo 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: excluyendo 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: pseudo selectores de encadenamiento.
Con la notable excepción de no poder encadenar / anidar :not selectores y pseudo elementos, puede usarlos 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 de navegador , etc.
:not es un selector de nivel CSS3 , la principal excepción en términos de soporte es que es IE9 +
La especificación también hace un punto interesante:
the
:not()pseudo permite escribir selectores inútiles. Por ejemplo:not(*|*), que no representa ningún elemento, ofoo:not(bar), que es equivalente afoopero con una especificidad más alta.
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).
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>
Al igual que para contribuir, las respuestas anteriores de: not () pueden ser muy efectivas 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 rojos o fondos, etc.) si se agregaron datos (es decir, ya no están prístinos) pero no son válidos.
Como dijeron otros, simplemente pones: no (.class). Para los selectores de CSS, recomiendo visitar este enlace, ha sido muy útil durante mi viaje: https://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048
X: no (selector)
- div: no (#contenedor) {
- color azul;
- }
La negación de la pseudo clase 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, si quisiera seleccionar cada elemento (no recomendado) excepto las etiquetas de párrafo, podríamos hacer:
1. *:not(p) {
2. color: green;
3. }
Normalmente, se agrega un selector de clase a la pseudo-clase :not() como:
:not(.printable) {
/* Styles */
}
Pero si necesita una mejor compatibilidad con el navegador (IE8 y versiones anteriores no es compatible con :not() ), probablemente esté mejor creando reglas de estilo para los elementos que sí tienen la clase "imprimible". Si incluso eso no es posible a pesar de lo que diga sobre su marca real, es posible que tenga que trabajar su marca alrededor de esa limitación.
Tenga en cuenta que, dependiendo de las propiedades que establezca en esta regla, algunos de ellos pueden ser heredados por descendientes que son .printable , o pueden afectarlos de una manera u otra. Por ejemplo, aunque la display no se hereda, la configuración de display: none en a :not(.printable) evitará que se muestren todos y sus descendientes, ya que elimina el elemento y su subárbol del diseño por completo. A menudo puede evitar esto usando visibility: hidden lugar, lo que permitirá a los descendientes visibles mostrar, pero los elementos ocultos seguirán afectando el diseño como lo hicieron originalmente. En resumen, solo ten cuidado.
Puede usar :not(.class) selector como se mencionó anteriormente.
Si le interesa la compatibilidad con Internet Explorer, le recomiendo que use http://selectivizr.com/ .
Pero recuerda ejecutarlo bajo apache, de lo contrario no verás el efecto.
Ejemplo
[class*=''section-'']:not(.section-name) {
@include opacity(0.6);
// Write your css code here
}
// Opacidad 0.6 todo "section-" pero no "section-name"
: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[]*/