Selección múltiple con patrones en CSS

Es posible que alguna vez cuando estamos diseñando una pagina web, nos encontremos que estamos nombrado elementos los cuales tienen el nombre bastante parecido, por ejemplo, email1, email2, email3,…

Imaginemos que estos elementos son campos input y queremos aplicarles a todos estos el mismo estilo, sin que este afecte al resto de inputs. Una primera opción es directamente aplicarles a estos elementos la misma clase y crear una regla con esta, eso si esta opción supondría que tenemos que ir uno a uno y agregarles la clase a cada uno, y en este caso tenemos 3, pero ¿y si tenemos 30?, ¿o 100?, ¿y si esa clase, por casualidad le damos un nombre que reescribe alguna hoja de estilos superior?. Una manera sencilla de crear una solución sin tocar el HTML que tenemos es utilizando patrones en nuestra hoja de estilo.

Seleccionar todos los atributos que comienzan por un valor. [attributo^=valor] 

Por ejemplo queremos seleccionar todos los valores que su id comienza por la palabra email usaríamos:

[id^="email"] {...}

Este selector se aplicaría a email1, email2, email3, email_loquesea.

Seleccionar todos los atributos que finalizan por un valor[attributo$=valor]

Si por ejemplo queremos seleccionar todos los valores que su id finaliza por la palabra usuario:

[id$="usuario"] {...}

Este selector se aplicaría a nombre_usuario, apellidos_usario, loquesea_usuario.

Seleccionar todos los atributos que contengan un valor: [attributo*=valor]

En este caso si queremos seleccionar todos los id que contengan la palabra usuario:

[id*="usuario"] {...}

Este selector se aplicaría a nombre_usuario, usuario_nombre, loquesea_usuario_loquesea.

+ Información Selectores de atributos en W3.org

Anuncios

Un comentario en “Selección múltiple con patrones en CSS”

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s