CSS Commands For Internet Explorer 7
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:
Your text
In this example, the has a child and is grand-child of . The content in the tag can be made green by using this CSS pattern:
div span {color: green;}
The above code will make the text in green when the tag is nested inside a . Similarly, tag could become a child, grand-child or great grand-child of 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 tag and not to others. Without using a child selector, we’ll be pushed to assign an id or a class to the 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 is a child of tag and it can not be a grandchild of . 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;}
Adjacent Selector
This is a very helpful CSS selector that lets you reference the HTML element that is next to some other element. Let’s have a look at this example of an adjacent selector:
blockquote+p { margin-top: 0; }
This CSS code tells that all paragraphs that go before a quote will not have a margin. This useful code comes in use when you may wish to always mention the person leaving the quote in a specific paragraph after the quote. This code is useful also when you want to eliminate the spaces between the quote and paragraph.
You can also use adjacent selector with horizontal lists when you may wish to arrange the very first item a little different than all other items in your list. Here’s another example that assigns a right border to every navigation item, excluding the first one.
li+li { border-right: 2px solid black;}
The above code will add a left-border to any ‘li’ (excluding the first one) that follows another ‘li’.
First-Child Pseudo Class
There are also some pseudo classes that IE 7 supports. One of these classes is the first child pseudo class that allows you to layout the very first HTML element in a different way in a given section. Say, for instance, you wanted that your first paragraph to not contain a top margin, you can use this command:
p:first-child {margin-top: 0;}
Here is another example in which the selector matches the very first li element in lists.
li:first-child { color:blue; }
Conclusion
Internet Explorer 7.0 supports quite a few new CSS commands and also fixes many CSS bugs. By using CSS commands, you have more control over your HTML and it makes your job easy. It is expected that more CSS commands will be created soon that will help developers add extra functionality to their HTML work.
