SmallBusiness

WebKnowHow

Navigation

Search

Search by Category

Home

New CSS Commands for Internet Explorer 7


	2.3/5.0 (3 votes total)
	Rate:

Trenton Moss
March 13, 2007

Trenton Moss

This article was written by Trenton Moss. Trenton's crazy about web usability and accessibility - so crazy that he went and started his own web usability and accessibility consultancy to help make the Internet a better place for everyone. He knows an awful lot about the Disability Discrimination Act and spends much of his time doing DOM scripting & accessible JavaScript.

Trenton Moss has written 3 articles for WebKnowHow.

View all articles by Trenton Moss...

There are a small handful of new CSS commands that you can now use for Internet Explorer 7. Well, they're not really new - most other browsers have supported them for a long time and IE is only just catching up. These new commands basically give you more control over HTML elements and eliminate the need to use classes or ids in a lot of instances.

Once IE6 becomes outdated you'll be able to use the commands outlined in this article. Actually, that's not strictly true - provided that your website doesn't rely on these commands and is still legible in IE6 and before then there's no problem using them.

Child selector

Despite Internet Explorer 6 not supporting the CSS child selector, it's actually been used a lot as a way of hiding CSS commands from Internet Explorer. This is no longer possible as IE7 now understands the child selector. So, what is the child selector? Well, imagine the following HTML structure:

<div><p><span>Text goes here</span></p></div>

In the above example, the <p> is a child of the <div> and the <span> is a grandchild of the <div>. We can make the text in the <span> red by using the following CSS rule:

div span {color: red;}

This basically means that the contents of the <span> will be red, provided that the <span> is nested within a <div>. That <span> could be a child, grandchild, great-grandchild etc. of the <div>.

If we were however to use the following CSS code:

div>span {color: red;}

...Then the text within our <span> wouldn't turn red. This is because we've inserted the child selector between the div and span (the greater than sign), which basically means that our span has to be a child of a div. In the above example, the <span> is a grandchild of the <div>.

So, by using the child selector, we can assign rules to any HTML element that's a child (and not a grandchild) of another element. Let's say for example we want a top margin to be assigned to the first <div> in our body, but not to any others. Without the child selector we would be forced to assign a class or id to this <div> and reference that class or id in our CSS command. Now though, we can reference this <div>, and only this <div>, without the need for a class or id through the CSS:

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

Using the child selector to hide commands from IE

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;}

Adjacent selector

The adjacent selector is another extremely useful CSS selector that up until now Internet Explorer hasn't understood. Fortunately, IE7 does understand it. The adjacent selector basically allows you to reference an HTML element that's adjacent to another element:

blockquote+p {margin-top: 0;}

The above CSS code basically says that any paragraph that's preceded by a quote shouldn't have a top margin. This is useful as you may always wish to cite the person making the quote in a paragraph after the quote and may want to get rid of the space between the paragraph and quote.

Another great example of when you may use the adjacent selector is in horizontal lists. Often, you may want to format the first item slightly differently to the other items in the list. So, if you wanted to assign a left border to each navigation item except for the first, you could use this CSS code:

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

This basically means that any <li> that follows another <li> (i.e. all of them except the first) should have a left hand border.

First-child pseudo class

Although there are still a number of pseudo classes IE7 doesn't understand, the first-child pseudo class is one that it does now support. Again, this is a good news as this allows us to format the first HTML element differently in any given section without having to assign it a class or id. So, for example, say you wanted the first paragraph in the content area to never have a top margin, you could use this CSS command:

#content p:first-child {margin-top: 0;}

Conclusion

Internet Explorer 7 is certainly an improvement on Internet Explorer 6, in terms of CSS. A very large number of CSS bugs have been fixed and IE7 now supports more CSS commands. There's still a very long way to go though and there remains a large number of CSS commands IE still doesn't understand - let's hope it catches up soon!