Is there a CSS selector by class prefix? -

-

i want apply css rule element 1 of classes matches specified prefix.

e.g. want rule apply div has class starts status- (a , c, not b in following snippet):

<div id='a' class='foo-class status-important bar-class'></div> <div id='b' class='foo-class bar-class'></div> <div id='c' class='foo-class status-low-priority bar-class'></div>

some sort of combination of:
div[class|=status] , div[class~=status-]

is doable under css 2.1? doable under css spec?

note: know can use jquery emulate that.

it's not doable css2.1, possible css3 attribute substring-matching selectors (which are supported in ie7+):

div[class^="status-"], div[class*=" status-"]

notice space character in second attribute selector. picks div elements class attribute meets either of these conditions:

  • [class^="status-"] — starts "status-" (obviously).

  • [class*=" status-"] — contains substring "status-" occurring directly after space character. class names separated whitespace per html spec, hence significant space character. checks other classes after first if multiple classes specified, and adds bonus of checking first class in case attribute value space-padded (which can happen applications output class attributes dynamically).

naturally, works in jquery, demonstrated here.

the reason need combine 2 attribute selectors described above because attribute selector such [class*="status-"] match following element, may undesirable:

<div id='d' class='foo-class foo-status-bar bar-class'></div>

if can ensure such scenario never happen, free use such selector sake of simplicity. however, combination above more robust.

if have control on html source or application generating markup, may simpler make status- prefix own status class instead as gumbo suggests.


Comments

Post a Comment

Popular posts from this blog

c++ - How do I get a multi line tooltip in MFC -

-
right now, have tool tip pops when hover on edit box. problem tool tip contains multiple error messages , in 1 long line. need have each error message on own line. error messages contained in cstring new line seperating them. my existing code below. bool ontooltiptext(uint, nmhdr* pnmhdr, lresult* presult) { assert(pnmhdr->code == ttn_needtexta || pnmhdr->code == ttn_needtextw); // need handle both ansi , unicode versions of message tooltiptexta* pttta = (tooltiptexta*)pnmhdr; tooltiptextw* ptttw = (tooltiptextw*)pnmhdr; // tchar szfulltext[256]; cstring strtiptext=_t(""); uint nid = pnmhdr->idfrom; if (pnmhdr->code == ttn_needtexta && (pttta->uflags & ttf_idishwnd) || pnmhdr->code == ttn_needtextw && (ptttw->uflags & ttf_idishwnd)) { // idfrom hwnd of tool nid = ::getdlgctrlid((hwnd)nid); } //m_errprojaccel[ch] contains 1 or more error messages each...
Read more

asp.net - In javascript how to find the height and width -

-
i having .aspx , masterpage page. in masterpage loading aspx page . in aspx page design using generating table structure using code-behind server in javascript how find height , width . regards, kumar if you're looking table height , width, should it var tbl = document.getelementbyid('tbldemo'); alert(tbl.offsetwidth + '\n' + tbl.offsetheight);
Read more

c# - DataTable to EnumerableRowCollection -

-
i have datatable according client requirement can contain invalid date "00/00/1999",null,empty string.(typed datset) when collect them enumerables wish convert of invalid forms empty string. (i.e) enumerablerowcollection<datarow> query = order in _table.asenumerable() select new { orderdate= string.isnullorempty(convert.tostring(order.field<datetime>("orderdate")) || (how check date invalid date) ? string.empty : order.field<datetime>("orderdate") } how check whether date valid date or not? datetime.tryparse...like given current code: datetime date; enumerablerowcollection<datarow> query = order in _table.asenumerable() select new { orderdate= string.isnullorempty(convert.tostring(order.field<datetime>("orderdate")) || !datetime.tryparse(convert.tostring(order.field<datetime...
Read more