vagacode

Por lo general, cuando queremos que las etiquetas de cierto tipo se vean de manera especial, les agregamos una clase y si deseamos excluir ciertos elementos, la pseudo-clase :not nos permite hacerlo fácilmente.

	<p><a href="#" class="ejemplo">un enlace normal</a></p>
	<p><a href="#" class="ejemplo esteno">este enlace NO será rojo</a></p>
	<p><a href="#" class="ejemplo">otro enlace normal</a></p>

Por ejemplo, podríamos definir alguna clase general y luego, hacer que no se aplique en ciertos casos:

.ejempo:hover:not(.esteno) {color: red;}

Al colocar el cursor encima de cada enlace, el texto se verá de color rojo excepto el segundo:

La pseudo-clase :not nos permite ahorrar código; por ejemplo, si quisiéramos que todas las imágenes tuvieran un borde excepto aquellas cuya clase fuera .sinborde, podríamos tener estas dos reglas:

img {
	border: 5px solid red;
}
img.sinborde {
	border: none;
}

Esto funcionará perfectamente pero podríamos simplificarlo y establecer una sola regla:

img:not(.sinborde ) {
	border: 5px solid red;
}

Otra forma de reducir el número de reglas es utilizar la pseudo-clase :any() que, por ahora, no está estandarizada pero puede usarse agregando prefijos (-moz y -webkit) sin problemas.

Lo que hace esta pseudo-clase es crear grupos de selectores que se escriben separados por comas.

Por ejemplo, supongamos que queremos que una serie etiquetas tenga un cierto color de fondo; podríamos escribir:

div, p, li {
	background-color: grey;
}

Pero también podríamos escribirlo de este otro modo (sin olvarse del prefijo):

:any(div, p, li) {
	background-color: grey;
}

La pseudo-clase :empty es muy interesante ya que selecciona los elementos que no contenga elementos internos (hijos) ni textos de ninguna clase.

.ejemplo:empty {
	background-color: #ff0;
}
.ejemplo:empty::before {
	content: "aca no hay nada";
	font-size: 80%;
}