Los elementos pueden tener varios nombres de clase. Por ejemplo:
<div class="module accordion expand"></div>Luego, en CSS, puede hacer coincidir ese elemento en función de cualquiera de ellos:
/* All these match that */
.module { }
.accordion { }
.expand { }Puede limitar sus selectores para que coincidan solo si varios de ellos están presentes, por ejemplo:
// Will only match if element has both
.accordion.expand { }Pero, ¿qué pasa con otros atributos?
Los nombres de las clases son únicos en la capacidad descrita anteriormente. Otros atributos no se tratan como “valores múltiples” solo porque tienen un espacio en ellos. Por ejemplo:
<div data-type="module accordion expand"></div>Este elemento solo tiene un atributo de tipo de datos con un valor de “módulo acordeón expandir”, no tres valores únicos “módulo”, “acordeón” y “expandir”. Pero digamos que queríamos poder seleccionar elementos basados en valores individuales como podemos hacer con los nombres de las clases.
Podríamos hacerlo usando un selector de atributo coincidente de subcadena “*” que coincidirá si la cadena proporcionada aparece en cualquier lugar del valor:
[data-type*="module"] {
}o solo coincidir cuando hay varios “valores” específicos:
[data-type*="accordion"][data-type*="expand"] {
}Mejor aún, use el selector separado por espacios en blanco (p. Ej. [data-type~="expand"]). De esa manera, no se verá afectado por algo como “expandir” que coincida con “expansor” cuando no lo desee.
[data-type~="accordion"][data-type~="expand"] {
}Ver demostración
Funciona en IE7 + (porque IE 7 fue el primer IE en admitir selectores de atributos)