3

I've got little IE7 issue. I've got following CSS code and it does not work in IE7. However, .row [class*="span"] and :first-child both work if they are not combined. Is there a way to do something similar or make it work somehow?

.row [class*="span"]:first-child {
    margin-left: 0;
}
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Ed T.
  • 1,039
  • 2
  • 11
  • 17
  • 5
    A bug in IE7? Impossibru – PeeHaa Feb 07 '13 at 18:20
  • Why do you need to use the bracket selectors? – Chad Feb 07 '13 at 18:25
  • That's to select all objects with class span1, span2, etc... – Ed T. Feb 07 '13 at 18:26
  • Try using className instead of class – Chad Feb 07 '13 at 18:27
  • 1
    Ah. "If the closing square bracket of an attribute selector, ], is immediately followed by an element type selector, the rule is parsed as if there’s a descendant combinator—that is, a space—between the selectors, instead of failing as it should." http://reference.sitepoint.com/css/css3attributeselectors – Chad Feb 07 '13 at 18:30
  • Just tired .row [className*="span"]:first-child, same thing, doesn't work. However .row [className*="span"] alone works... – Ed T. Feb 07 '13 at 18:32
  • Are you sure `[class*="span"]` is the first child? – BoltClock Feb 07 '13 at 18:32
  • @Torr3nt: Except there are no type selectors involved here. There's only a class, an attribute, and a pseudo-class. – BoltClock Feb 07 '13 at 18:33
  • It seems to be working in ie7 for me. http://tinkerbin.com/1VJm75kl – Chad Feb 07 '13 at 18:40

1 Answers1

6

If the first child is [class*="span"], check to see if there's an HTML comment before it. If there is, IE7 will mistakenly think the comment is the first child, so it won't match the element you're looking for.

If you can't change the markup to delete the comment, you can work around it using the override technique I describe here:

.row [class*="span"] {
    margin-left: 0;
}

.row [class*="span"] ~ [class*="span"] {
    margin-left: /* Reset the left margin for other elements */;
}

If you don't know the margin value to reset it to, you can try adding another selector that targets IE7's behavior with the * + html hack:

.row [class*="span"]:first-child, * + html .row :first-child + [class*="span"] {
    margin-left: 0;
}

:first-child + [class*="span"] matches that element if it follows exactly one comment node that's the first child in IE7.

Community
  • 1
  • 1
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • You were right, I had comment just before first child... as soon as I removed it, started working. – Ed T. Feb 07 '13 at 18:43
  • 2
    As an automated workaround for IE7 `:first-child` and sibling combinator (`+`) bug, you can [remove comments as DOM nodes](http://tanalin.com/en/blog/2011/08/ie7-css-first-child-adjacent/) via JavaScript after page is loaded. – Marat Tanalin Feb 07 '13 at 18:52