Selecting a complex jQuery selector present in a page

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]

Solution:

$(“[id$=_SearchCheckBox]”).css(‘color’,’#737373′);

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

Note:

$ 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.