CSS and apply style to all controls with a specific identifier

Question

let's say that I have several inputs with an identifier:

ctl139_ctl00_txtValue ctl140_ctl00_txtValue ctl141_ctl00_txtValue ..... xxxxxx_ctl00_txtValue 

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

I tried CSS3 as Minkiele suggestessted, but I did the following:

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

then it should apply the style to all elements where id contains my string. It works in Chrome, but not in IE8, but msdn says that it should work. Why is this not working?

Answer 1

You can use the css3 selector in: $= , but I do not know how many browsers implement this function.

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

If you can change the input markup, I suggest adding a class to these elements, which is easier to simplify the design.

CSS3 selector

Update

Quirksmode has a test page for this type of selector. It seems that only browsers that do not support this feature are (surprise) IE 5.5 and 6

Answer 2

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

If you haven't come across jQuery and some small DOM overhead, this will work:

Grab the container by all objects, let them say them in a div. Keep this selector as tight as possible, as it is "loosened", the more elements are processed and, therefore, the more overhead.

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

Basically, you iterate over the DOM elements in a specific container, checking if the identifier contains the template you want, and then applying your CSS.

This should work, but as I said, the DOM overhead is related to how your HTML code is structured.