¿Hay un selector CSS por prefijo de clase?

Question

¿Hay un selector 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 div que tiene clase que comienza 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] y div[class~=status-]

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

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

132

css css-selectors

Author: TylerH, 2010-07-27

Source

4 answers

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 el estado de 'recomendación' para 2.1 y 3)

He aquí un resumen de cómo *creo que funciona:

[ ]: es el contenedor para selectores complejos si se quiere...
class: 'clase' es la atributo que estás viendo en este caso.
* : modificador(si lo hay): en este caso - "comodín" indica que está buscando cualquier coincidencia.
test-: el valor (suponiendo que haya uno) del atributo - que contiene la cadena "test -" (que podría ser cualquier cosa)

Así, por ejemplo:

[class*='test-'] {
  color: red;
}

Podría ser más específico si tiene una buena razón, con el elemento también

ul[class*='test-'] > li { ... }

He tratado de encontrar casos extremos, pero no veo necesita usar una combinación de ^ y * - como * obtiene todo...

Ejemplo: http://codepen.io/sheriffderek/pen/MaaBwp

Http://caniuse.com/#feat=css-sel2

Todo lo anterior IE6 obedecerá felizmente. : )

Tenga en cuenta que:

[class] { ... }

Seleccionará cualquier cosa con una clase...

9

Author: sheriffderek,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-07-08 01:38:29

Esto no es posible con selectores CSS. Pero podría usar dos clases en lugar de una, por ejemplo, status y important en lugar de status-important.

6

Author: Gumbo,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-07-26 20:23:45

No puedes hacer esto no. Hay un selector de atributos que coincide exactamente o parcialmente hasta el signo a, pero no funcionaría aquí porque tiene varios atributos. Si el nombre de clase que estás buscando siempre sería el primero, puedes 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 asumir que los nombres de clase siempre estarán delante ya que javascript podría manipular el atributo.

2

Author: SBUJOLD,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-07-26 21:22:32

score 291 · Accepted Answer

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

[class^="status-"] - comienza con "status" (obviamente).
[class*=" status-"] - contiene la subcadena "status -" que aparece directamente después de un carácter de espacio. Clase los nombres están separados por espacios en blanco según la especificación HTML, de ahí el carácter de espacio significativo. Esto comprueba cualquier otra clase después de la primera si se especifican varias clases, y agrega una ventaja de comprobar la primera clase en caso de que el valor del atributo esté rellenado con espacio (lo que puede suceder con algunas aplicaciones que generan atributos class dinámicamente).

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

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

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

Si puede asegurarse de que tal escenario nunca suceda, entonces usted es libre de usar tal selector en aras de la simplicidad. Sin embargo, la combinación anterior es mucho más robusta.

Si tiene control sobre la fuente HTML o la aplicación que genera el marcado, puede ser más sencillo simplemente haga el prefijo status- su propia clase status en su lugar como sugiere Gumbo.