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*/
}
Apasionado de la montaña, del SEO y la programación a partes iguales, llevo más de 20 años trabajando en distintos sectores, pero siempre enfocado a la web, si quieres saber más de mí, sigue el enlace.