HTML 5: las pseudo-clases para mayor interactividad

Está claro que hoy en día el HTML no es nada sin los CSS, y hay algunos elementos que tienen algunas pseudo-clases que permiten algunas mejoras a la hora de interactuar con los estilos o diseños.

Con la nueva versión, el HTML 5 tiene algunas clases que en las versiones anteriores no existían… aquí la lista de clases:

  • : link: Son enlaces (o elementos) que no hayan sido visitados.
  • : visited: Son enlaces (o elementos) que sí han sido visitados.
  • : active: Son enlaces (o elementos) que están activados (por ejemplo, en el momento en el que hace clic en ellos).
  • : enabled: Son elementos que están activos, como enlaces, botones, formularios…
  • : disabled: Para los elementos contrarios al anterior, aquellos que en ese momento están desactivados.
  • : checked: Para los formularios que tengan activada alguna opción.
  • : indeterminate: Para los input con el estado indeterminate.
  • : default: Cuando el formulario es por defecto.
  • : valid: Si la validación del formulario es correcta.
  • : invalid: Todo lo contrario, si falla al validar.
  • : in-range: si los valores del formulario están en el rango correcto.
  • : out-of-range: Como antes, pero al revés, si los valores se salen del rango.
  • : required: Si el valor es obligatorio en el formulario.
  • : optional: Cuando los valores son opcionales en el formulario.
  • : read-only: Si los valores del formulario (aunque casi todos los elementos del HTML lo permiten) son sólo lectura.
  • : read-write: Para aquellos elementos que se pueden editar.

A parte de estos, también esta el : target, aunque si he de decir la verdad, no queda muy claro exactamente su funcionamiento. Y, claro está, luego está todo el sistema de selectores que tiene específicamente el CSS 3 que permite hacer cosas muy interesantes incluidos los valores de los elementos y atributos.

1 comentario en “HTML 5: las pseudo-clases para mayor interactividad”

  1. :target es el identificador de un fragmento de contenido. En principio puede parecer confuso para qué sirve, pero es idóneo para construir lightbox, navegación por pestañas o galerías de imágenes sin utilizar JavaScript.

    Dicho de otro modo, :target representa el contenido “activo” o el objeto que recibe el evento, por ej. en el caso de las pestañas, cuando se cambia el contenido al clickar en un enlace sin recargar la página.

Deja un comentario