Credit image

¿Te gusta el diseño web? ¡Echa un vistazo a la documentación de LenguajeCSS.com!

5 pseudoselectores CSS que quizás no conocías

5 pseudo selectores CSS, de la mano de Mozilla, que nos permitirán cambiar el estilo a determinados elementos con connotaciones especiales en el documento.

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.

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.

Escrito por Manz, el , en css. Comentarios recibidos: 3.

3 comentarios de lectores
Nazarí González
Nazarí González
1

Me ha gustado mucho esta entrada, es curiosos que una entrada tan útil no tenga ningún comentario hasta el momento, la única pega que le veo es la compatibilidad con todos los navegadores, ya que aunque seria lo idea no podemos diseñar webs basándonos solamente en el navegador que a nosotros nos gusta. Igualmente aunque ya conocía alguna es una información muy útil. Un Saludo

Héctor Mx
Héctor Mx
2

Es muy interesante el artículo, este es de los pocos blogs que en verdad aportan algo.

David Latouquette
David Latouquette
3

Muy bueno el artículo, me gusta este blog, siempre encuentro algo interesante. Además estoy aprendiendo a programar en HTML y esto me viene genial. Saludos

Publica tu opinión

Si lo deseas, puedes utilizar el siguiente formulario para publicar tu opinión o responder a alguna de las existentes:

Previsualización

Aquí se previsualizará su comentario. Revise que sea correcto antes de publicarlo.