Expresiones regulares en selectores CSS

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.