Most of time, the moment we see a complex ID like ‘ctl00_m_g_f368f5ab_d679_4436_a6da_938c6bfcd60a_ctl00_SearchCheckBox’ we faint… 😉
And what we end up is start finding some parent which has an ID or see if there is a css class defined for this control. Targeting a control using its parent is good and performance-wise effective. However, using a css class for targeting a control is not advisable.
To work with a control which has a full-grown id like the one mentioned above, all you need is to make use of the CSS 3 selector. Before i proceed, let me clear a wrong notion here…
CSS 3 won’t work in IE6.0 [period], but CSS 3 selectors when used in jQuery on an IE 6 browser will work [period]
Steps to write:
$(“”).css(‘color’,’#737373′); //This is what you want at the end
$(““).css(‘color’,’#737373′); //Add square brakets inside
$(“[id$=]”).css(‘color’,’#737373′); //Add id$= inside the square brackets
$(“[id$=_SearchCheckBox]”).css(‘color’,’#737373′); //Add your tail end of your id
$ in regular expression, is used to match a text that ends with a particular string. You can refer the CSS 3.0 Cheat Sheets to see the other possible options.