Selectores CSS y jQuery (V). Pseudo clases de atributos.

Facebooktwittergoogle_pluslinkedinmailFacebooktwittergoogle_pluslinkedinmail

En el artículo anterior hemos visto pseudo clases que afectan a los elementos en base a su estado. Tradicionalmente, este era el concepto de las pseudo clases. Sin embargo, en el panorama actual, existen gran cantidad de pseudo clases que obedecen a otras características de los elementos HTML.

En este artículo vamos a conocer siete pseudo clases que se refieren a que un determinado elemento tenga o no aplicado ciertos atributos, lo que nos permitirá definir mucho mejor el aspecto de nuestros documentos web.

LAS PSEUDO CLASES :required Y :optional

Estas dos pseudo clases se aplican a campos de formulario. Se refieren al hecho de que un campo tenga o no asignado el atributo required, lo que lo marca como obligatorio. Observa el siguiente HTML:

Cómo puedes ver hay cuatro campos de texto, de los cuales los dos últimos tienen el atributo required aplicado. Ahora observa el siguiente CSS:

Observa cómo hemos definido las reglas CSS. Si cargas la página, verás que los campos que no tienen el atributo required (es decir, que son opcionales), aparecen en verde, mientras que los que sí lo tienen aparecen en rojo.

Si bien estas pseudo clases no son selectores accesibles directamente desde jQuery, lo que sí puedes hacer es establecerlas en CSS y atribuir el valor true o false a la propiedad required de cada elemento dinámicamente, lo que hará que las reglas CSS que se le aplican cambien en tiempo real.

LAS PSEUDO CLASES :disabled Y :enabled

Estas dos pseudo clases actúan de una forma similar a las anteriores pero, en esta ocasión, se refieren a los campos que tienen, o no tienen, el atributo disabled. Observa el siguiente HTML:

Y el correspondiente CSS:

Cuando cargues la página en el navegador verás, como ya supones, dos campos en verde, sobre los que puedes actuar, y dos en rojo, sobre los que no puedes actuar. Al igual que antes, se puede actuar sobre la propiedad disabled desde jQuery, y el aspecto de los campos se actualizará dinámicamente.

LAS PSEUDO CLASES :read-only Y :read-write

Estas pseudo clases actúan sobre campos que tengan, o que no tengan, establecido el atributo readonly. Como ya sabes, en muchos casos, cuando queremos crear campos con un contenido sobre el que el usuario no pueda actuar, recurrimos al atributo readonly, mejor que a disabled, por las limitaciones implícitas de este (los datos marcados como disabled no pasan en un formulario, por ejemplo). De esta forma, podemos marcar con unas reglas CSS específicas los campos cuyo contenido el usuario puede ver, pero no puede manipular. Esto es especialmente útil en campos de tipo file o date, ya que limitamos al usuario para que no pueda escribir contenido no válido.

Como siempre, este atributo se puede cambiar dinámicamente, mediante la propiedad readonly, desde jQuery.

LA PSEUDO CLASE :lang

Esta nos permite definir reglas CSS sobre elementos cuyo contenido esté en un idioma determinado o, mejor dicho que tenga un valor de idioma específico en el atributo lang, ya que no se identifica, realmente, el idioma del contenido. Observa el siguiente HTML:

Y el correspondiente CSS:

Cómo ves en el HTML, se definen cuatro párrafos. Los que tienen el valor es en el atributo lang aparecen en rojo en la página, mientras que el que tiene el valor fr aparece en verde. Como ves, el contenido está todo en español. Ni HTML ni CSS infieren el idioma a partir del contenido, sino a través del valor de lang. Observa que, en el CSS, el vaor de lang para el que queremos aplicar determinadas reglas debe escribirse sin comillas (p:lang(fr), no p:lang('fr')).

RESUMEN

PSEUDO CLASES DE ATRIBUTOS
SELECTOR COMENTARIOS
:required Se refiere a los campos que tienen establecido el atributo required.
:optional Se refiere a los campos que no tienen establecido el atributo required.
:disabled Se refiere a los campos que tienen establecido el atributo disabled.
:enabled Se refiere a los campos que no tienen establecido el atributo disabled.
:read-only Se refiere a los campos que tienen establecido el atributo readonly.
:read-write Se refiere a los campos que no tienen establecido el atributo readonly.
:lang(idioma) Se refiere a los elementos que tienen establecido un idioma concreto en el atributo lang.
     

Deja un comentario

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