Click here to Skip to main content
Click here to Skip to main content

New CSS commands for Internet Explorer 7

By , 13 Jan 2007
Rate this:
Please Sign up or sign in to vote.

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!

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

About the Author

Trenton Moss
Web Developer
United Kingdom United Kingdom
Trenton Moss is crazy about usability and accessibility - so crazy that he founded Webcredible, an industry leading user experience consultancy, to help make the Internet a better place for everyone. He's very good at information architecture and interaction design.

Comments and Discussions

 
GeneralIE7 does not understand the child selector Pinmember'Anil' Radhakrishna8-Mar-07 20:15 
Contrary to your statement that "IE7 understands the child selector", I found with this little experiment - http://www26.brinkster.com/mvark/testpad/conditionalcss.html that it does NOT understand child selectors just like in IE 6. I tested my page with IE 7.0 on Windows XP ( & I can send a screeshot if required).
 
Can you please view the source of the above page & let me know if I missing something?
 
Thanks.
 
'Anil' Radhakrishna
Web Development Tips, Tricks & Trivia
GeneralCSS Commands --> Css Selectors Pinmember[echo]16-Jan-07 22:06 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web04 | 2.8.140421.2 | Last Updated 14 Jan 2007
Article Copyright 2007 by Trenton Moss
Everything else Copyright © CodeProject, 1999-2014
Terms of Use
Layout: fixed | fluid