How to apply specific CSS rules to Chrome only?

Question

Is there a way to apply the following CSS to a specific div only in Google Chrome?

position:relative;
top:-2px;

Answer 1

/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
     /*your rules for chrome*/
     #divid{ 
         position:relative;
         top:-2px; 
     }
}

check this.it work for me.

Answer 2

CSS Solution

from https://jeffclayton.wordpress.com/2015/08/10/1279/

/* Chrome, Safari, AND NOW ALSO the Edge Browser and Firefox */
@media and (-webkit-min-device-pixel-ratio:0) {
  div{top:10;} 
}

/* Chrome 29+ */
@media screen and (-webkit-min-device-pixel-ratio:0)
  and (min-resolution:.001dpcm) {
    div{top:0;} 
}

/* Chrome 22-28 */
@media screen and(-webkit-min-device-pixel-ratio:0) {
  .selector {-chrome-:only(; 
     property:value;
  );} 
}

JavaScript Solution

if (navigator.appVersion.indexOf("Chrome/") != -1) {
// modify button 
}

Answer 3

http://www.templatemonster.com/help/how-to-create-browser-specific-css-rules-styles.html

Apply specific CSS rules to Chrome only by using .selector:not(*:root) with your selectors:

div {
  color: forestgreen;
}
.selector:not(*:root), .div1 {
  color: #dd14d5;
}

<div class='div1'>DIV1</div>
<div class='div2'>DIV2</div>

Answer 4

Chrome provides no own conditionals to set CSS definitions just for it! There shouldn't be a need to do this, cause Chrome interprets websites like defined in w3c standards.

So, you have two meaningful possibilities:

1. Get current browser by javascript (look here)
2. Get current browser by php/serverside (look here)

Answer 5

An update for chrome > 29 and Safari > 8 :

Safari now supports the @supports feature too. That means those hacks would also be valid for Safari.

I would recommend

@ http://codepen.io/sebilasse/pen/BjMoye

/* Chrome only: */
@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { 
  p {
    color: red;
  }
}

Answer 6

So simple. Just add a second class or id to you element at load time that specifies which browser it is.

So basically at the front end, detect browser then set id/class and your css will be befined using those browser specific nametags