Pseudo clases comunes y cómo usar :not

Las pseudo-clases son palabras especiales que se pueden adicionar a ciertas reglas de CSS. De manera habitual, usamos varias pero, sobre todo, la famosa :hover que permite cambiar ciertas propiedades cuando ponemos el cursor del ratón encima de un elemento.

No es la única pseudo-clase que vemos en el CSS, suele haber más que se aplican a los enlaces u otras etiquetas. Por ejemplo:

a:link { ....... }
a:visited { ....... }
a:hover { ....... }
a:active { ....... }

ejemplo:link { ....... }
ejemplo:visited { ....... }
ejemplo:hover { ....... }
ejemplo:active { ....... }

Cada una de ellas las afecta de manera distinta siempre y cuando sepamos que ese es el orden en que deben definirse ya que si no se respeta, no funcionarán.

Dos de ellas se aplican a enlaces que posean un atributo href:

:link establece las propiedades de las etiquetas que posean un atributo href
:visited establece las propiedades de las etiquetas cuyos enlaces hayan sido visitados

el resto, puede aplicarse a casi cualquier otra etiqueta:

:hover establece las propiedades cuando ponemos el cursor del ratón encima
:active establece las propiedades cuando hacemos click con el ratón sobre ella

Un ejemplo:

.ejempo {
  color: #CCC;
  cursor: pointer;
  font-size: 20px;
  font-family: Tahoma;
}
.ejempo:link { color: #FFF; }
.ejempo:visited { color: blue; }
.ejempo:hover { color: yellow; }
.ejempo:active {
  color: red;
  font-size: 30px;
}

<a class="ejemplo" href="#"> etiqueta A </a>

<span class="ejemplo"> etiqueta SPAN </span>

Veremos al texto del enlace de color blanco y al texto del span de color gris porque no tiene un atributo href así que la regla .ejempo:link {} no lo afecta. En ambos, al colocar el cursor encima se verán de color amarillo y si se hace click sobre ellos, serán de color rojo y más grandes.

etiqueta A

etiqueta SPAN

Usando CSS3 hay muchas posibilidades extras pero, la mayoría de ellas no funciona en Internet Explorer si se tienen versiones inferiores a la 9. Por ejemplo, una de ellas es la llamada :not que nos permite excluir ciertas etiquetas.

Por lo general, cuando queremos que las etiquetas de cierto tipo se vean de manera especial, les agregamos una clase. Usando :not podemos hacer lo mismo, definir una clase general y luego, hacer que no se aplique en ciertos casos. La sintaxis es:

:not(.nombreclase)

En el ejemplo anterior, podría hacer esto:

.ejempo:active:not(.esteno) {
  color: red;
  font-size: 30px;
}

<a class="ejemplo" href="#"> enlace demo </a>
<a class="ejemplo esteno" href="#"> este enlace tiene NOT </a>
<a class="ejemplo" href="#"> otro enlace demo </a>

En cuyo caso, el enlace del medio no cambiará de color al hacer click sobre él.

enlace demo

este enlace tiene NOT

otro enlace demo

En IE parecería que esto perturbara un poco así que conviene re-declarar la regla y condicionarla en ese navegador pero, es algo que hay verificar caso por caso:

<!--[if IE]>
  <style> .ejemplo:active { color: red;font-size: 30px; } </style>
<![endif]-->

Un uso práctico de esto podría ser la definición de reglas que suele hacerse para mostrar las imágenes de las entradas del blog. Si he creado una regla para decorarlas:

.post-body img {
  background-color: #000;
  border: 2px solid #888;
  border-radius: 5px;
  box-shadow: 2px 2px 2px #888;
  padding: 5px;
}

todas las imágenes que agregue tendrán ese estilo y, si quiero que alguna no lo tengan debería crear una clase que haga lo inverso:

.post-body img.nada {
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

así, si escribiera esto, la primera imagen se vería decorada y la segunda no:

<img src="URL_IMAGEN" /&lgt;
<img class="nada" src="URL_IMAGEN" /&lgt;

Usando :not podría ahorrarme el trabajo de quitar cada propiedad agregada y simplificar la regla de este modo:

.post-body img.nada:not(.nada) {
  background-color: #000;
  border: 2px solid #888;
  border-radius: 5px;
  box-shadow: 2px 2px 2px #888;
  padding: 5px;
}