There are various types of CSS commands which can be applied to view web pages on a specific web browser. Internet Explorer is one of the most popular browsers. But there are certain commands which it is yet to support. These commands have been supported by other major browsers since long time ago. But Internet Explorer 7 has started to recognize these commands to make life easy for web designers and users alike. The commands we are talking about provide more control over your HTML elements and do away with the need to employ ids and classes in most of the cases. Some of these commands are highlighted below:

The child selector is one such property which is not supported by IE 6. One of the important uses of this property is to conceal CSS commands from IE. But you can no longer make use of this command IE 7, as it has recognized child selector.

<div><p><span>The text begins from here</span></p></div>

In the above mentioned instance, the <p> tag is the child element of the <div> tag and the <span> tag is the grandchild of the <div> tag. You can assign the blue color to the text written inside the <span> tag by the following piece of code:

div span {color: blue;}

By using the above code, you can turn the color of the text within the <span> into blue. For this, the <span> must be nested within the <div>. The <span> can not only be a child of <div>, it can also be grandchild and great-grandchild of <div> tag. On the other hand, if you use the following code, the output would not be what you expected.

div>span {color: blue;}

Here, the color of the text inside <span> wouldn’t become blue. The reason behind this is that there is a child selector ‘>’ between the <div> and <span>. To get the desired effect, <span> must be a child element of the <div>. But in this case, the <span> is a grandchild of the <div>. So the role of a child selector is shown here. It can be used to consign rules to an HTML element which is a child and not a grandchild of another element.

Let us take another example into consideration. Suppose, you want to assign a top margin to the first <div> in your body and not to any other elements, then you will be compelled to use a class or id to the div and refer that class or id in the CSS command. But by using a child selector, you can refer this <div> without a class or id:

body>div {margin-top: 20px;}

Another type of selector which IE 7 starts supporting is the adjacent selector. The function of adjacent selector is to reference an HTML object which is adjacent to another element. For example:

blockquote+p {margin-top: 0;}

The output of the above code will be any paragraph which begins with a quote, must not contain a top margin. You can also make use an adjacent selector in horizontal lists. If you want to add a left border to all the navigation items in the list, excluding the first, then the CSS code will be:

li+li {border-left: 1px solid black;}

It means that each list item <li> which follows another <li> (except the first), must contain a left hand border.

Tags: CSS for Internet Explorer