Pseudoclases Css de negación :not( ) y elemento vacío :empty

Pseudoclases Css de negación :not( ) y elemento vacío :empty

Por Kseso ✎ 0

Pseudoclase :not

La pseudo-clase css de negación, :not(X), aplicada a un selector permite estilizar los elementos que no sean lo indicado en el argumento (lo que hay en el paréntesis).

No se puede utilizar otro ":not" como argumento de la negación. Los pseudoelementos tampoco pueden ser utilizados como argumento de la negación.. Pero sí otras pseudoclases.
Lo siguiente sí es válido:

p:not(:hover) {/*declaraciones*/} /*VÁLIDO*/ :not(:not(...)) {/*declaraciones*/} /*INVÁLIDO*/ :not(:after) {/*declaraciones*/} /*INVÁLIDO*/

Sintaxis de :not

La pseudoclase de negación se puede declarar junto a otro elemento o sin él:

p:not(.miclase) {/*declaraciones*/} :not(p) {/*declaraciones*/}

En el primer caso del código anterior estilizamos a todos los párrafos que no tengan asignada la clase "miclase". Y en el siguiente a todos los elementos que no sean párrafos.

Y por supuesto, aunque sería correcto :not(*) no te servirá de nada.

Pseudoclase :empty

La pseudo-clase css de elemento vacío :empty representa a los elementos que no contienen hijos.

Por lo tanto, sólo se puede aplicar a aquellos elementos susceptibles de contener a otros en ellos. Más claro: a un div, p, form... . Pero no a aquellos que no pueden tener hijos. Un ejemplo de éstos últimos podrían ser label, textarea, img...
Así que es muy importante que no confundas el concepto de hijo (un elemento dentro de otro) con el contenido de un elemento: el texto dentro de un párrafo es su contenido. Un span o img dentro de ese párrafo serían sus hijos.

Sintaxis de :empty

Como cualquier otra pseudoclase de css:

div:empty {/*declaraciones*/}

La especificación, ya recomendación del consorcio: Selectors Level 3

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso

Comentarios: 0

EsCss RSS del Blog RSSS Comentarios ᛯ Licencia Beerware Humans.txt ᛯ Diseño por Kseso SiteMap