Unable to apply specific CSS only for opera 40.0

Question

I have tried several stack overflow links where CSS hacks for opera were:-

@media not all and (-webkit-min-device-pixel-ratio:0) {  /*opera*/
    selector{

}
}

IN opera ver40.0 it doesn't work. I also tried answers on this post:- How to make CSS visible only for Opera

Then I wrote several media queries separately for chrome, firefox, ie and opera like this:-

 @media not all and (-webkit-min-device-pixel-ratio:0) {  /*opera*/
    #selector {  
       margin-top:-20px;
    }  
} 


@media screen and (-webkit-min-device-pixel-ratio:0) { /*chrome*/

  #selector{
    margin-top:-10px;
}
}

@media not all and (-moz-windows-compositor) { /*firefox*/
        #selector{
        margin-top:-10px;
    }
 }

@media screen and (min-width:0\0) { /* IE */

    #selector{
    margin-top:-10px;
    }

}

It works on chrome, firefox, ie but in opera it doesn't. When I check developer tools in Opera it's taking CSS of chrome instead. Now you might wonder why not then have it for chrome but I can't because margin-top is rendering way off with -10px in opera so I need -20px only in opera.

Answer 1

Since no hack is available based solely on CSS, the javascript browser detection worked for me and then I used jquery to override the css like this:-

var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;

if(isOpera){
    $(selector).css('margin-top','-30px');
}