NOT For IE Only – CSS Child Selectors don’t work in IE
October 10th, 2008 by NikhilCSS for Non-IE Browsers : Its no news to CSS developers that , CSS Child Selectors like the example below, doesnt seem to work in IE.Â
e.g. div > span { some css } , that means “when a span element is a child ( and NOTÂ a grandchild or great grand child etc.) of a division element” .
But we used this CON to our advantage. Historically, the child selector has been used to hide CSS commands from IE. Simply by placing html>body
in front of any CSS command IE will ignore it:
html>body .foo {CSS commands go here;}
This works because <body>
is always a child of <html>
– it can of course never be a grandchild or great-grandchild of <html>
.
Now that IE7 understands the child selector, you have to insert an empty comment tag in directly after the greater than sign. IE7 will then not understand this selector (who knows why!?) and will therefore totally ignore this CSS command:
html>/**/body .foo {CSS commands go here;}
If haven’t already seen these before, have a read through the following as well
- Conditional Comments : For your IEs Only -Part Duex
- CSS hack: Javascript, CSS, HTML for Firefox only
- For your IEs Only
Tags: IE Bugs, IE Fixes, IE Hacks, IE Issues
Subscribe to ExpressingIT by Email | Follow Me on Twitter