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

Creative Tim – Dale un look profesional a tu web

Buscando inspiración y recursos para el desarrollo de nuevos proyectos di con la web de Creative Tim y sus diseños y plantillas para web son muy buenos. Dentro de los temas que nos ofrecen destacaria el Paper Kit, Get Shit Done Kit y Awesome Landing Page.
Estos Kits son gratuitos para uso personal, y en el caso que seas desarrollador tiene un coste de 19€ cada uno.
Yo os recomendaria descargar las versiones gratuitas primero y enredar con ellas. Tengo que decir que la documentación y los ejemplos que hay en las descargas dan mucha ayuda a la hora de realizar tus desarrollos. Decir que todos los temas estan basados en Bootstrap 3, y si tienes un poco de experiencia con el, no vas a tener problemas a la hora de integrarlos.

Para poder descargarlos hay que registrarse en la web, y uno de los primeros correos que te envian, por lo menos en mi caso, es un codigo de descuento para comprar uno de sus temas.