CSS Hacks – Browser Specific Selectors

CSS Browser Selector gives us the ability to write specific CSS code for each operating system and each browser. To send different CSS rules to IE, we can use the child selector command, which IE can’t understand. The child selector command involves two elements, one of which is the child of the other. So, html>body refers to the child, body, contained within the parent, html.

Here is the list of some useful browser specific selectors when we need to change a style in one browser but not the others.

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

Opera versions 9 and below

html:first-child {}

Safari

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

Place the code in front of the style to use these selectors.
For example:

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

* html #content-box {
width: 350px;
} /* overrides the above style and changes the width to 350px in IE 6 and below */