5 pseudoselectores CSS que quizás no conocías

Los pseudo-selectores son un concepto introducido en el lenguaje CSS, con los cuales se permite modificar el estilo de ciertos elementos de un documento atendiendo a la estructura o al estado del mismo.

La sintaxis CSS se divide en tres partes: Selector, pseudo-selector y declaración.

Después de definir una clase o id para aplicar estilo a una o varias etiquetas HTML, con los pseudo-selectores podemos incrementar el grado con el que estamos refinando, y basarnos en cosas más especificas.

Existen varios, desde el :first-child de CSS2.1 hasta el nuevo :empty de CSS3. Sin embargo, en este artículo vamos a ver 5 curiosos pseudo-selectores de Mozilla, que pueden comprobarse en el recién lanzado Firefox 4 RC1.

1. Imágenes rotas

Uno de los pseudo selectores de Mozilla es :-moz-broken, el cuál permite aplicar un estilo a las imagenes «rotas» del documento (la URL del atributo SRC no existe).

img:-moz-broken {
  border:2px dashed #880000;
  background:#FF0000;
  color:#FFF;
}

Ejemplo

Representación de una imagen rota utilizando -moz-broken y el gato de OatMeal

2. Imágenes cargando

Cuando cargamos una página web en nuestro navegador, este realiza la petición y comienza cargando el documento HTML y todos sus archivos asociados (imágenes, javascript, css, etc...).

Todos estos archivos se van cargando de forma secuencial según varios factores (nuestra conexión, límites internos del navegador, ancho de banda del servidor, etc...). Debido a estos límites, es normal ver zonas o imágenes que tardan en cargarse.

El pseudo selector :-moz-loading permite dar estilo a una imagen que está en ese punto en el que no se ha cargado.

img:-moz-loading { 
   background:#FF7733; 
   width:300px; 
   height:300px; 
}

No coloco ejemplo, porque «choca» con el plugin LazyLoad y no se ve reflejado, pero es muy sencillo.

3. PlaceHolder con HTML5

En HTML5 se introduce un nuevo atributo denominado placeholder para los input y textarea.

Este atributo no es más que un texto que aparecería en dichos campos de introducción de datos en los formularios, que generalmente se usa de ayuda para saber que información hay que insertar ahí.

Con el pseudo selector :-moz-placeholder se puede modificar el estilo de estos textos.

input:-moz-placeholder, textarea:-moz-placeholder { 
  color:#BBB; 
  font-style:italic 
}

Ejemplo

Campo de texto con placeholder:

4. Selección de texto

Con el pseudo selector ::-moz-selection se puede cambiar el estilo de la zona seleccionada con el cursor del ratón para realizar un copy/paste.

p::-moz-selection, ::selection {
  background:#FF0000;
  color:#FFF;
}

Ejemplo

Selecciona este texto para ver el efecto.

Se puede usar el pseudo selector ::selection para conseguir compatibilidad con otros navegadores.

5. Ventana inactiva

Con el pseudo selector :-moz-window-inactive se pueden obtener resultados muy curiosos. Un elemento con esta característica, aplicará el estilo cuando el navegador pase a ser una ventana inactiva.

div#imag3:-moz-window-inactive {
  background:#EEE;
}

Ejemplo

Se puede ver un ejemplo de esta funcionalidad en Moz-window-inactive, de developer mozilla.

Finalmente, en CSS Tests Selectors puedes ver una comparativa con el estado actual de los pseudo-selectores estandares y su compatibilidad entre navegadores.

marzo

2011