Selectores CSS y jQuery (VI). Pseudo clases de contenido.

Facebooktwittergoogle_pluslinkedinmailFacebooktwittergoogle_pluslinkedinmail

Existen cuatro pseudo clases en CSS que permiten aplicar reglas de estilo a ciertos campos de HTML 5 en base a que su contenido esté o no adaptado a lo que tales campos permiten. Estamos hablando, específicamente, de los campos de tipo date, que se emplean para fechas, o los de tipo number, que se emplean para que el usuario introduzca valores numéricos. Veamos como gestionarlos desde CSS.

LAS PSEUDO CLASES :valid E :invalid

Estas se usan con campos de tipo date, para que se apliquen determinadas reglas CSS, en base a que la fecha introducida tenga un formato válido o no. Observa el siguiente HTML:

Cómo ves, tenemos un campo de tipo fecha. Ahora observa el siguiente CSS.

Cuando cargues la página, verás que, si seleccionas una fecha correcta, aparece el campo en verde. Sin embargo, si escribes a mano una fecha incorrecta (digamos, por ejemplo, 30/02/2017), el campo aparece en rojo.

Realmente, esto nos sirve cómo indicador de que la fecha es incorrecta, pero no evita que el usuario teclee una fecha incorrecta. Para eso tendríamos que recurrir a mecanismos de control específicos (como los que ofrecen Bootstrap o jQueryUI), o a prevalidaciones.

LAS PSEUDO CLASES :in-range Y :out-of-range

Estas dos se aplican sobre campos de tipo number, para poder dotarles de determinadas reglas CSS, según el valor tecleado esté dentro de un rango, o fuera del mismo. Observa el siguiente HTML:

Y ahora el correspondiente CSS:

Carga la página en el navegador y observa que el campo numérico aparece en verde. Si tecleas un número que esté fuera del rango especificado por los atributos min y max verás como el campo se pone en rojo.

RESUMEN

PSEUDO CLASES DE CONTENIDO
SELECTOR COMENTARIOS
:valid Se refiere a campos de tipo date que tienen una fecha correcta.
:invalid Se refiere a campos de tipo date que tienen una fecha incorrecta.
:in-range Se refiere a campos de tipo number que tienen un valor comprendido entre los límites establecidos por los atributos min y max.
:out-of-range Se refiere a campos de tipo number que tienen un valor que está fuera de los límites establecidos por los atributos min y max.
     

Deja un comentario

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