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.

Comments

Una respuesta a «HTML 5: las pseudo-clases para mayor interactividad»

  1. Avatar de Sergio

    :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 una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *