Clever Geek Handbook

CSS: IE7 First Parent Selector

I have a problem with IE7. I have CSS code and it doesn't work in IE7. However .row [class * = "span"] and: first-child work if they are not combined. Is there a way to do something like this, or to make it work somehow?

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


source to share


1 answer


If the first child [class*="span"]

, check if there is an HTML comment in front of it. If so, IE7 will mistakenly think the comment is the first child , so it won't match the element you're looking for.

If you cannot change the markup to remove the comment, you can work around this by using the override method 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 value of the field before reset, you can try adding another selector that targets IE7's behavior with a * + html

hack:

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

:first-child + [class*="span"]

matches this element if it matches exactly one comment node, which is the first child in IE7.

+6


source






More articles:


All Articles