Same style for id's that end with the same letters

Question

I have in my screen a few tables that their id ends with "test": studentsTest, marksTest, classesTest etc.

I want them all to have the same style. Is there a way to define a style for all the objects which thier id ends with the same characters?

Thanks Devora

Answer 1

If you are able to change your mark-up, the easiest, and most cross-browser compliant way of acheiving this is to use a 'test' class, for example:

.test {background-color:#FC0;}

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

If you're not able to change the mark-up but you are able to use jQuery you can style IDs that end with 'test' like so:

$(document).ready(function(){

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

});

Your final option, if you can't or won't use jQuery (or similar) is to use pure CSS3. This uses the same syntax as above but will only work in the more modern browsers:

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

Answer 2

According to W3C it's theoretically possible but only in CSS 3.

E[foo$="bar"] an E element whose "foo" attribute value ends exactly with the string "bar"

However I'd say this is far from teh best way of going about it because it will only work in the latest browsers. I also doubt the performance would be up to much. I'd suggest you give the elements that you need to share a common style a class and then style the class.