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
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;} 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.
This is a case where you would definitely be using classes.
<table id="studentsTest" class="test"? If for some kind of strange reason you are unable to use this you could try this jqery regex filter that should be capable of selecting elements including wildcards.
I would suggest to just add a class to them like so:
<table class="test"> then just style the test class
.test { border: 1px solid #f00; } etc etc. Better and much more semantic. That way you can drop the Test suffix in your ids and just go with students, marks, etc. which definitely describes what your table contains
