CSS and apply style for all controls with specific ID

Question

Hello, let's say that I have some inputs with ID like that:

ctl139_ctl00_txtValue
ctl140_ctl00_txtValue
ctl141_ctl00_txtValue
.....
xxxxxx_ctl00_txtValue

how, using CSS, apply the same style for these inputs (where ID follows the pattern: xxxx_ctl00_txtValue)

I tried CSS3 as Minkiele suggessted but I've done the following:

[id*="_ctl00_txtValue"]{ /* RULES */ } 

then it should apply style for all elements where id contains my string. It works in Chrome but not in IE8 but msdn tells that it should work. Why it doesn't work?

Answer 1

You could use css3 selector ends in: $=, but I don't know how many browsers implement this feature.

input[id$="_ctl00_txtValue"]{
   /* RULES */
}

If you can change input markup, I suggest to add a class to this elements, which for styling purpose is simpler.

CSS3 Selectors

Update

Quirksmode has a test page for this selectors type. It seems the only browsers not supporting this feature are (surprise surprise) IE 5.5 and 6

Answer 2

The fact you have no control over the generated HTML makes it difficult.

If you've not adversed to jQuery and some slight DOM overhead, this will work:

Get a hold of the container for all the items, let's say their in a div. Keep this selector as tight as possible, as the "looser" it is, the more elements to process and thus more overhead.

var pattern = '_ctl00_txtValue';
$('#somecontainer input').each(function() {
   if ($(this).attr("id").indexOf(pattern) > 0) {
      // Apply CSS using jQuery, e.g:
      $(this).css("color","red");
   }
});

Basically you're looping through the DOM elements within a given container, checking if the ID contains the pattern you want, then if it does, apply your CSS.

That should work, but as i said, there is some DOM traversal overhead depending how your HTML is structured.