Selector de clases, para dar estilos a las que contengan, comiencen o terminen por una cadena (Comodines CSS)

En CSS podemos seleccionar todas las clases que comiencen, terminen, o contengan una cadena en concreto para ello:

[class^=lo_que_sea]{
    /*Selecciono todas las clases que comienzan por lo_que_sea*/
}
[class$=lo_que_sea]{
    /*Selecciono todas las clases que terminen en por lo_que_sea*/
}
[class*=lo_que_sea]{
    /*Selecciono todas las clases que contengan por lo_que_sea*/
}

Ejemplo

<div class=”mi-clase”><div>
<div class=”tu-clase”><div>
<div class=”todas-las-clases”><div>

Aquí vemos que tenemos 3 div con 3 clases diferentes, que pueden tener cosas en común o no, si seleccionamos:

  • [class^=mi]{
        /*Los estilos que aplique aquí se aplicarán únicamente al primer DIV*/
    }
  • [class$=clase]{
        /*Los estilos que aplique aquí se aplicarán en los 2 primeros DIV*/
    }
  • [class*=clase]{
        /*Los estilos que aplique aquí se aplicarán en los 3 DIV*/
    }