jquery - How CSS selector works exactly -

if have css defnition as;

.grid .data table tr.selected td [class^="icon-"], .grid .data table tr.selected td [class*=" icon-"] {     background-image: url("../img/css-sprites.png"); } 

how work exactly? mean if condition met (tr having class selected , has child td has child element having class containing name 'icon-')

my question "to" element background-image applied to?

the css rules applied each element match selector. therefore, each element having classname starting icon- , specified parents background-image.

also, please note there 2 rules, separated comma:

.grid .data table tr.selected td [class^="icon-"], .grid .data table tr.selected td [class*=" icon-"] 

multiple selectors mean 1 or other need match apply rules.

the attribute match selector ^= means "begins with". *= means "contains". please follow link of first comment more information particular type of selectors: css selector class prefix (thanks boltclock).

this read: the skinny on css attribute selectors