Css – How to do a Chrome/Opera specific stylesheet


I need to do chrome/opera hacks because of a font replacement script wanted by the client that breaks things… this is sad but everything is working in IE6-7, FF2-3 and Safari. I have no way of fixing the script itself, I can only hack around it using CSS and HTML.

I'm trying to do something in the lines of :

<!--[if IE 6]>
   <link rel="stylesheet" href="ie6.css" type="text/css" media="screen" />

Is it possible?

I saw this way of doing chrome specific fixes like:

body:nth-of-type(1) .elementOrClassName
/* properties go here */

Is this working? Is there a simpler way? What about Opera?


Best Solution

A clean javascript way to do this: http://rafael.adm.br/css_browser_selector/

It ads browser specific classes to the body tag of your html which you can use in your css like:

.opera #thingie, .chrome #thingie {
  do: this;

Hope this helps.