Earlier, the main problem with the CSS has been lack of browser support. 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 recognize.

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. Browser detection using CSS hacks works by sending one CSS rule to the browser you're trying to trick, and then send a second CSS rule to the other browsers, overriding this first command.

 If you have two CSS rules with identical selectors then the second CSS rule will always take precedence. 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 */