Browser specific selector

For this week tip, it is about how to create different selector or CSS rule based on different browser. This allows you to make exception such as do this width for default and this other width for IE only.

Basic Syntax
IE 6 and below
* html {}

IE 7 and below
*:first-child+html {} * html {}

IE 7 only
*:first-child+html {}

IE 7 and modern browsers only
html>body {}

Modern browsers only (not IE 7)
html>/**/body {}

Recent Opera versions 9 and below
html:first-child {}

Safari
html[xmlns*=""] body:last-child {}

How to Use
To use these selectors, place the code in front of the style that you are trying to override and replace the curly bracket with the existing rule that you have.

For example you have a selector or id called “content-box”:
#content-box {
width: 300px;
height: 150px;
}

Now if you want to override the rule for IE 6 (see the syntax above):

#content-box {
width: 300px;
height: 150px;
}

* html #content-box {
width: 250px;
}

*:first-child+html #content-box {
width: 220px;
}

The way that the CSS is being executed or interpreted is:

All browser will first read the #content-box CSS rule. Then, since only IE6 understands *html context, then IE6 or below browser will apply the override rule which is setting the width to 250px. Only IE7 understands *:first-child+html context, then IE 7 browser will apply the second override rule which is setting the width to 220px.

This override can be applied to all 3 levels of CSS: id, class or HTML elements.

Happy CSS coding!