CSS Commands for Internet Explorer 7

Written by:  • Edited by: Michele McDonough
Updated Jun 8, 2010
• Related Guides: HTML | Internet Explorer | CSS

There are plenty of CSS commands available that you can use for I.E 7.0. These are not really new because many other browsers have already supported them for decades. HTML itself is good enough but these CSS commands give you added control over HTML components.

Child Selector

Child selector has been used by web developers to hide many different CSS commands (tags) from Internet Explorer. This technique is only possible in I.E 6. Since IE 7 recognizes the child selector, the same is not possible with this version. You might have a question –What actually the child selector is? Let’s find out with an example:

<div> <p> <span> Your text </span> </p> </div>

In this example, the <div> has a child <p> and <span> is grand-child of <div>. The content in the <span> tag can be made green by using this CSS pattern:

div span {color: green;}

The above code will make the text in <span> green when the <span> tag is nested inside a <div>. Similarly, <span> tag could become a child, grand-child or great grand-child of <div> tag.

Similarly, rules can be assigned to every HTML tag that is a child of another tag. Let us understand it further - for example, you want to assign a top margin to the first <div> tag and not to others. Without using a child selector, we’ll be pushed to assign an id or a class to the <div> tag and then reference that id or class in the CSS command.

Hiding Commands From IE Using The Child Selector

People have actually used this selector in order to prevent Internet explorer from seeing CSS commands. Just by putting html>body beside CSS commands, Internet Explorer will disregard these.

Take an example of this code:

html>body .func {your CSS commands ;}

This will work because <body> is a child of <html> tag and it can not be a grandchild of <html>. For Internet Explorer 7.0, you also have to insert a blank comment tag right after the ‘>’ sign. This empty tag will not be understood by I.E and will be ignored.

html>/**/body .func {Your CSS commands;}

Showing page 1 of 2

 
blog comments powered by Disqus
Email to a friend