CSS :first-child selector IE7

Question

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;
}

Answer 1

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.