From 1109132f09d75da9a28b649c7677bb6ce07c40c0 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:45 -0500 Subject: initial commit --- files/es/web/css/_colon_not()/index.html | 112 +++++++++++++++++++++++++++++++ 1 file changed, 112 insertions(+) create mode 100644 files/es/web/css/_colon_not()/index.html (limited to 'files/es/web/css/_colon_not()/index.html') diff --git a/files/es/web/css/_colon_not()/index.html b/files/es/web/css/_colon_not()/index.html new file mode 100644 index 0000000000..5182d83d77 --- /dev/null +++ b/files/es/web/css/_colon_not()/index.html @@ -0,0 +1,112 @@ +--- +title: ':not()' +slug: 'Web/CSS/:not()' +tags: + - CSS + - Diseño + - Referencia + - Web + - pseudoclase +translation_of: 'Web/CSS/:not' +--- +
{{CSSRef}}
+ +

La pseudoclase :not() de CSS representa elementos que no coinciden con una lista de selectores. Como evita que se seleccionen elementos específicos, se lo conoce como la pseudoclase de negación.

+ +
/* Selecciona cualquier elemento que NO sea un párrafo */
+:not(p) {
+  color: blue;
+}
+ +
+

Notas:

+ + +
+ +

Sintaxis

+ +

La pseudoclase :not() requiere una lista separada por comas de uno o más selectores como argumento. La lista no debe contener otro selector de negación o un pseudoelemento.

+ +
+

La capacidad de enumerar más de un selector es experimental y aún no es ampliamente compatible.

+
+ +
{{csssyntax}}
+ +

Ejemplo

+ +

HTML

+ +
<p>Soy un párrafo.</p>
+<p class="fancy">¡Soy muy elegante!</p>
+<div>NO soy un párrafo.</div>
+
+ +

CSS

+ +
.fancy {
+  text-shadow: 2px 2px 3px gold;
+}
+
+/* elementos <p> que no están en la clase `.fancy` */
+p:not(.fancy) {
+  color: green;
+}
+
+/* Elementos que no son elementos <p> */
+body :not(p) {
+  text-decoration: underline;
+}
+
+/* Elementos que no son elementos <div> o <span> */
+body :not(div):not(span) {
+  font-weight: bold;
+}
+
+/* Elementos que no son `.crazy` o `.fancy` */
+/* Tenga en cuenta que esta sintaxis aún no está bien soportada. */
+body :not(.crazy, .fancy) {
+  font-family: sans-serif;
+}
+ +

Resultado

+ +

{{EmbedLiveSample('Ejemplo')}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Selectors', '#negation', ':not()')}}{{Spec2('CSS4 Selectors')}}Extiende su argumento para permitir algunos selectores no simples.
{{SpecName('CSS3 Selectors', '#negation', ':not()')}}{{Spec2('CSS3 Selectors')}}Definición Inicial.
+ +

Compatibilidad con navegadores

+ +
+ + +

{{Compat("css.selectors.not")}}

+
-- cgit v1.2.3-54-g00ecf