mismo estilo para la id que terminan con las mismas letras

Question

que tengo en la pantalla de un par de mesas que su ID finaliza con un "test": studentsTest, marksTest, classesTest etc.

quiero que todos ellos tienen el mismo estilo . ¿Hay alguna manera de definir un estilo para todos los objetos cuyo ID termina con los mismos caracteres?

Gracias Devora

Answer 1

Si puede cambiar su margen de beneficio, el más fácil y el más cruzado navegador compatible forma de acheiving esto es usar una clase de 'prueba', por ejemplo:

.test {background-color:#FC0;} 

<table id="students" class="test">...</table> 
<table id="marks" class="test">...</table> 
<table id="classes" class="test">...</table> 

Si usted no es capaz de cambiar el margen de ganancia, pero que son capaces de usar jQuery puede estilo de identificadores que terminan con 'prueba' como tal:

$(document).ready(function(){ 

    $('table[id$=test]').css('background-color','#FC0'); 

}); 

Tu última opción, si no puedes o no usará jQuery (o similar) es usar CSS3 puro. Utiliza la misma sintaxis que la anterior, pero solo funcionará en los navegadores más modernos:

table[id$=test] {background-color:#FC0;} 

Answer 2

Según W3C Es teóricamente posible, pero sólo en CSS 3.

E [foo $ = "bar"] un elemento E cuyo atributo "foo" termina exactamente con la "barra" cadena

Sin embargo, yo diría que esto está lejos de teh mejor manera de hacer las cosas, ya que sólo funcionará en los navegadores más recientes. También dudo que el rendimiento sea demasiado. Te sugiero que le des los elementos que necesitas para compartir un estilo común en una clase y luego dale estilo a la clase.

Answer 3

Este es un caso en el que definitivamente estaría utilizando clases.

<table id="studentsTest" class="test"? 

Si por algún tipo de extraña razón no puede utilizar este podría intentar this filtro de expresiones regulares jqery que debería ser capaz de seleccionar elementos, incluyendo comodines.

Answer 4

Yo sugeriría que acaba de agregar una clase a ellos de esta manera:

<table class="test"> 

a continuación, sólo la clase de prueba Estilo

.test { 
    border: 1px solid #f00; 
} 

, etc, etc mejor y mucho más semántica. De esta forma, puede soltar el sufijo de prueba en sus ID y simplemente ir con estudiantes, marcas, etc. que definitivamente describe lo que contiene su tabla