Hay ocasiones en las que podemos querer aplicar estilos CSS sobre ciertas clases que no teniendo el mismo nombre, tienen una parte del mismo similar. Esto nos puede pasar por ejemplo en algún template de WordPress que no queramos o sepamos modificar, porque resulte más cómodo hacer esto que incluir una clase común a todos los elementos o por el motivo que sea.
En fin, para empezar hay que conocer los típicos selectores que funcionan sobre un elemento con atributos html determinados que la mayoría habréis usado anteriormente, como:
input[type=email] { } /* Este estilo sólo se aplica sobre inputs que tengan el atributo type="email" */
input[type="text"] { } /* Este estilo sólo se aplica sobre inputs que tengan el atributo type="text" */
a[href="#"] { } /* Este estilo sólo se aplica sobre enlaces que tengan el atributo href="#" */
El problema está cuando queremos hacer algo como: «Aplica este estilo sólo a los que tengan un título que empieza por «tutia» o una clase css que contenta la palabra «rojo». Pues bien, la primera vez que vi hacer esto fue en el sistema de columnas de Bootstrap, que utilizan una expresión regular para todas sus col-x, y en lugar de tener que hacer:
<div class="col col-12">
Y aplicar estilos sobre .col y sobre .col-12
Lo que hacen es un:
<div class="col-12">
Y aplican la expresión regular sobre todo lo que empieza por «col-«, con la siguiente expresión:
[class^=col-]
Pues bien, hoy he intentado realizar lo mismo sobre una elemento de lista de un menú que tenía un montón de clases:
<li class="list-item current-list-item item-has-children blablabla"
Y cuál ha sido mi sorpresa cuando no funcionaba (desde htaccess, las expresiones regulares y yo no nos llevamos especialmente bien, así que en realidad no me he sorprendido tanto, pero también podría haber caído en lo que significaba el símbolo ^).
Pues bien, investigando por ahí he descubierto que si un elemento tiene más de una clase, esta expresión no funciona siempre y hay que utilizar lo siguiente:
[class*=current-list-item]
Investigando más aún he empezado a entender las cosas que paso a comentar a continuación:
p[id^="col"] { } /* Lo que busco es una id que empieza por la cadena "col" */
p[class$="col"] { } /* Lo que busco es una clase que termina por la cadena "col" */
p[title*="col"] { } /* Encuentra la cadena "col" en un title de un párrafo, esté donde esté */
Cosa que para los amantes de las expresiones regulares quizás ya estaba claro, pero para los negados como yo no lo estaba tanto.
4 comentarios
Las expresiones regulares son las clases?
Hola, no. Las expresiones regulares de CSS se pueden aplicar sobre clases, o sobre ids, o sobre etiquetas.
Las «NO SON LAS CLASES».
Las clases pertenecen a CSS y son utilizadas para delimitar porciones de contenidos para ser trabajados y tratados por CSS a los efectos de aplicarles colores, tamaños, letras y todo tipo de ajustes a lo seleccionado en dicha porcion de contenido o estructura, mientras que las expresiones regulares pueden aplicarse en diferentes contextos, tanto en programas como en lenguajes de programacion, no necesariamente en CSS solamente.
En principio podria decir que las expresiones regulares son una metodologia de busqueda estandarizada o mejor dicho, es un conjunto de caracteres especiales para ser usados en busquedas mas complejas, es decir, para ajustar o afinar mucho mas un patron de busqueda dentro de diferentes escenarios, los cuales pueden ser lenguajes de programacion, lenguajes de maquetacion o aplicaciones como Libreoffice, Microsoft Office, OpenOffice, etc.
Las expresiones regulares te permiten definir un patron de busqueda muy pulido y muy refinado para ajustar al maximo la busqueda y reducir de esa manera los tiempos de busqueda, como asi tambien la precision y exactitud de la misma.
Correccion de Comentario.
LAS EXPRESIONES REGULARES NO SON LAS CLASES. Las clases pertenecen a CSS y son utilizadas para delimitar porciones de contenidos para ser trabajados y tratados por CSS a los efectos de aplicarles colores, tamaños, letras y todo tipo de ajustes a lo seleccionado en dicha porcion de contenido o estructura, mientras que las expresiones regulares pueden aplicarse en diferentes contextos, tanto en programas como en lenguajes de programacion, no necesariamente en CSS solamente. En principio podria decir que las expresiones regulares son una metodologia de busqueda estandarizada o mejor dicho, es un conjunto de caracteres especiales para ser usados en busquedas mas complejas, es decir, para ajustar o afinar mucho mas un patron de busqueda dentro de diferentes escenarios, los cuales pueden ser lenguajes de programacion, lenguajes de maquetacion o aplicaciones como Libreoffice, Microsoft Office, OpenOffice, etc. Las expresiones regulares te permiten definir un patron de busqueda muy pulido y muy refinado para ajustar al maximo la busqueda y reducir de esa manera los tiempos de busqueda, como asi tambien la precision y exactitud de la misma.