-2

If I have a 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 would it work exactly? I mean if the condition is met (tr is having class as selected and it has a child td which has any child element having class containing name 'icon-')

My question is "to" which element would the background-image get applied to?

copenndthagen
  • 49,230
  • 102
  • 290
  • 442
  • What you miss here isn't clear. It's a long (and expensive) selector but there's no trap here. – Denys Séguret Jul 15 '13 at 07:22
  • To the element that has the class `class^="icon-"`. – putvande Jul 15 '13 at 07:23
  • 1
    And what does this have to do with jQuery? – BoltClock Jul 15 '13 at 07:24
  • It would be applied to all elements within `td` elements within `tr.selected` elements within .. (etc) .. which have a class containing `icon- ` . The first selector says the class attribute starts with `icon- ` and the second says the class attribute contains ` icon-`, so that something with 'class="foo icon-bar"` will test as true – Dom Day Jul 15 '13 at 07:30
  • Jquery uses this :- http://sizzlejs.com/ – Pranav Jul 15 '13 at 07:31

4 Answers4

2

The css rules are applied to each element that match the selector. Therefore, each element having a classname starting with icon- and with the specified parents will get that background-image.

Also, please note that there are two rules, separated by the comma:

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

Multiple selectors mean that one OR the other need to match to apply the rules.

The attribute match selector ^= means "begins with". *= means "contains". Please follow the link of the first comment for more information about that particular type of selectors: css selector by class prefix (thanks BoltClock).

This is also a good read: The Skinny on CSS Attribute Selectors

Community
  • 1
  • 1
Alp
  • 29,274
  • 27
  • 120
  • 198
  • 1
    "Note that i eliminated the additional white-space." No, don't do that. [It's there for a reason.](http://stackoverflow.com/questions/3338680/css-selector-by-class-prefix/8588532#8588532) – BoltClock Jul 15 '13 at 07:35
0

The last element in each of the selectors will receive the background url [class*=" icon-"] and [class^="icon-"]

Zeb Rawnsley
  • 2,210
  • 1
  • 21
  • 33
0

When will the background-image get applied to all

When we use , (commas) to specify selectors we say that ...this, this and this would have the same style or in other words, these comma seprated elements will each have the same specified style and so then the style will be applied to each element.

Wehn will the background-image get applied to one element

As the code in your question has no comma between the elements so you are continiously defining child elements of the one another so the last child element you specify is td[class*='icon-] so all the tds with the class containing icon- letters would get the style applied to them.

Mohammad Areeb Siddiqui
  • 9,795
  • 14
  • 71
  • 113
0

"^="

in this case it is apply style to a element which has a class starting from icon- and is child of td that is child of <tr class="selected">

"*="

and after the comma the "*=" part defines that any class containing "icon-" in it and child of td and your respective tree is applicable for the style

Sahil Popli
  • 1,967
  • 14
  • 21