¿Existe un selector de CSS por prefijo de clase?
Quiero aplicar una regla CSS a cualquier elemento cuya clase coincida con el prefijo especificado.
Por ejemplo, quiero una regla que se aplique a un div que tenga una clase que comience con status-(A y C, pero no B en el siguiente fragmento):
<div id='A' class='foo-class status-important bar-class'></div>
<div id='B' class='foo-class bar-class'></div>
<div id='C' class='foo-class status-low-priority bar-class'></div>
Algún tipo de combinación de:
div[class|=status]ydiv[class~=status-]
¿Es factible bajo CSS 2.1? ¿Es factible bajo alguna especificación CSS?
Nota: sé que puedo usar jQuery para emular eso.
No es factible con CSS2.1, pero es posible con los selectores de coincidencia de subcadenas de atributos CSS3 (que son compatibles con IE7+):
div[class^="status-"], div[class*=" status-"]
Observe el carácter de espacio en el segundo selector de atributos. Esto recoge divelementos cuyo classatributo cumple cualquiera de estas condiciones:
[class^="status-"]— comienza con "estado-"[class*=" status-"]— contiene la subcadena "status-" que aparece directamente después de un carácter de espacio. Los nombres de las clases están separados por espacios en blanco según la especificación HTML , de ahí el carácter de espacio significativo. Esto verifica cualquier otra clase después de la primera si se especifican varias clases, y agrega la ventaja de verificar la primera clase en caso de que el valor del atributo tenga espacios (lo que puede suceder con algunas aplicaciones que generanclassatributos dinámicamente).
Naturalmente, esto también funciona en jQuery, como se demuestra aquí .
La razón por la que necesita combinar dos selectores de atributos como se describe anteriormente es porque un selector de atributos como este [class*="status-"]coincidirá con el siguiente elemento, lo que puede no ser deseable:
<div id='D' class='foo-class foo-status-bar bar-class'></div>
Si puede asegurarse de que tal escenario nunca suceda, entonces puede utilizar dicho selector en aras de la simplicidad. Sin embargo, la combinación anterior es mucho más sólida.
Si tiene control sobre la fuente HTML o la aplicación que genera el marcado, puede ser más sencillo hacer que el status-prefijo sea su propia statusclase, como sugiere Gumbo .
Los selectores de atributos CSS le permitirán verificar los atributos de una cadena. (en este caso, un nombre de clase)
https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
(parece que en realidad está en estado de "recomendación" para 2.1 y 3)
Aquí hay un resumen de cómo *creo que funciona:
[ ]: es el contenedor para selectores complejos por así decirlo...class: 'clase' es el atributo que estás viendo en este caso.*: modificador (si lo hay): en este caso, "comodín" indica que estás buscando CUALQUIER coincidencia.test-: el valor (suponiendo que exista uno) del atributo - que contiene la cadena "prueba-" (que podría ser cualquier cosa)
Así por ejemplo:
[class*='test-'] {
color: red;
}
Podrías ser más específico si tienes una buena razón, con el elemento también.
ul[class*='test-'] > li { ... }
Intenté encontrar casos extremos, pero no veo la necesidad de usar una combinación de ^y *, ya que * obtiene todo...
ejemplo: http://codepen.io/sheriffderek/pen/MaaBwp
http://caniuse.com/#feat=css-sel2
Todo lo que esté por encima de IE6 obedecerá felizmente. : )
tenga en cuenta que:
[class] { ... }
Seleccionará cualquier cosa con una clase...
