llamar - selectores css avanzados

¿Hay un selector CSS por prefijo de clase?

Question

Quiero aplicar una regla CSS a cualquier elemento cuya una de las clases coincida con el prefijo especificado.

Por ejemplo, quiero una regla que se aplique a div que tiene una clase que comienza con el 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] y div[class~=status-]

¿Es factible bajo CSS 2.1? ¿Es factible bajo cualquier especificación de CSS?

Nota: Sé que puedo usar jQuery para emular eso.

Answer 1

Esto no es posible con los selectores de CSS. Pero podría usar dos clases en lugar de una, por ejemplo, el estado e importante en lugar de importante para el estado .

Answer 2

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 si ...
• 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 (asumiendo que hay uno) del atributo - que contiene la cadena "test-" (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 { ... }

He intentado encontrar casos extremos, pero no veo la necesidad de usar una combinación de ^ y * , porque * lo tiene 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 ...

Answer 3

No es factible con CSS2.1, pero es posible con los selectores de ajuste de subcadena de atributo 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 los elementos div cuyo atributo de class cumple con cualquiera de estas condiciones:

• [class^="status-"] - comienza con "estado-" (obviamente).

• [class*=" status-"] - contiene la subcadena "estado-" que ocurre 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 significativo del espacio. Esto verifica cualquier otra clase después de la primera si se especifican múltiples clases, y agrega una bonificación al verificar la primera clase en caso de que el valor del atributo sea de espacio limitado (lo que puede suceder con algunas aplicaciones que generan atributos de class dinámicamente).

Naturalmente, esto también funciona en jQuery, como se demuestra here .

La razón por la que necesita combinar dos selectores de atributos como se describe anteriormente es porque un selector de atributos como [class*="status-"] coincidirá con el siguiente elemento, lo que puede ser indeseable:

<div id=''D'' class=''foo-class foo-status-bar bar-class''></div>

Si puede asegurarse de que tal situación nunca ocurra, entonces es libre de usar dicho selector por motivos de simplicidad. Sin embargo, la combinación anterior es mucho más robusta.

Si tiene control sobre el código HTML o la aplicación que genera el marcado, puede ser más simple simplemente hacer que el prefijo de status su propia clase de status , como sugiere Gumbo .

Answer 4

No puedes hacer esto no. Hay un selector de atributos que coincide exactamente o parcialmente hasta un signo -, pero no funcionaría aquí porque tiene múltiples atributos. Si el nombre de la clase que está buscando siempre sería el primero, podría hacer esto:

<html>
<head>
<title>Test Page</title>
<style type="text/css">
div[class|=status] { background-color:red; }
</style>
</head>
<body>
<div id=''A'' class=''status-important bar-class''>A</div>
<div id=''B'' class=''bar-class''>B</div>
<div id=''C'' class=''status-low-priority bar-class''>C</div>
</body>
</html>

Tenga en cuenta que esto es solo para señalar qué selector de atributos CSS es el más cercano, no se recomienda suponer que los nombres de clase siempre estarán al frente ya que javascript podría manipular el atributo.