How to apply specific CSS rules to Chrome only?

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

position:relative;
top:-2px;

CSS Solution

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

/* Chrome, Safari, AND NOW ALSO the Edge Browser and Firefox */
@media screen 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 
}

As we know,Chrome is a Webkit browser,Safari is a Webkit browser too,and Also Opera,so it's very hard to target the Google Chrome,using media queries or CSS hacks,but Javascript is really more effective.

Here is the piece of Javascript code that will target Google Chrome 14 and later,

  var isChrome = !!window.chrome && !!window.chrome.webstore;

and below is a list of Available Browser hacks,for the Google chrome including the influenced browser,by that hack

WebKit hack:

.selector:not(*:root) {}

• Google Chrome:All the versions
• Safari:All the versions
• Opera :14 and Later
• Android:All the versions

Supports Hacks:

@supports (-webkit-appearance:none) {}

Google Chrome 28,and Google Chrome > 28, Opera 14 and Opera > 14

• Google Chrome:28 and Later
• Opera :14 and Later
• Firefox: 64 and Later (i.e. this no longer works)

Property/Value Hacks:

.selector { (;property: value;); }
.selector { [;property: value;]; }

Google Chrome 28,and Google Chrome < 28, Opera 14 and Opera > 14,and Safari 7 and Less than 7.

• Google Chrome:28 and Before
• Safari:7 and Before
• Opera :14 and Later

JavaScript Hacks:1

var isChromium = !!window.chrome;

• Google Chrome:All the versions
• Opera :14 and Later
• Android:4.0.4

JavaScript Hacks:2 {Webkit}

var isWebkit = 'WebkitAppearance' in document.documentElement.style;

• Google Chrome:All the versions
• Safari:3 and Later
• Opera :14 and Later

JavaScript Hacks:3

var isChrome = !!window.chrome && !!window.chrome.webstore;

• Google Chrome:14 and Later

Media Query Hacks:1

@media \\0 screen {}

• Google Chrome:22 to 28
• Safari:7 and Later

Media Query Hacks:2

@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { .selector {} }

• Google Chrome:29 and Later
• Opera:16 and Later

For more information please visit this website

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

This css browser selector may help you. Take a look.

> CSS Browser Selector is a very small javascript with just one line > which empower CSS selectors. It gives you the ability to write > specific CSS code for each operating system and each browser.

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>

Have never run across an instance where I had to do a Chrome-only css hack until now. However, I found this to move content below a slideshow where clear:both; affected nothing in Chrome (but worked fine everywhere else - even IE!).

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    /* Safari and Chrome, if Chrome rule needed */
    .container {
     margin-top:100px;
    }
 
    /* Safari 5+ ONLY */
    ::i-block-chrome, .container {
     margin-top:0px;
    }

The accepted answer matches Firefox 80+ also.

To target all Webkit browsers (Edge 79+, Chrome, Safari), find a -webkit specific CSS extension that is not supported by Firefox (use https://caniuse.com). This is a moving target; one of the Webkit browsers may remove it, and a non-Webkit browser may add support for it.

Here are two examples:

@supports(-webkit-text-security: circle) {
  /* Matches Edge 79 - latest (92) */
  /* Matches Chrome 4 - latest (95) */
  /* Matches Safari 3.1 - latest (15/TP) */
  /* Matches Opera 15 - latest (78) */

  /* does not match Firefox */
}

@supports(-webkit-tap-highlight-color: black) {
  /* Matches Edge 12 - latest (92) */
  /* Matches Chrome 16 - latest (95) */
  /* Matches Opera 15 - latest (78) */

  /* does not match Safari */
  /* does not match Firefox */
}

If you actually need Chrome-only, JS is probably the only way to go.

The .selector:not(*:root) {} hack in https://stackoverflow.com/a/25496712/1218408 still excludes Firefox through version 92 but matches Safari.

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

if you want we can add class to specific brwoser see [fiddle link][1] [1]:

var BrowserDetect = {
        init: function () {
            this.browser = this.searchString(this.dataBrowser) || "Other";
            this.version = this.searchVersion(navigator.userAgent) || this.searchVersion(navigator.appVersion) || "Unknown";
        },
        searchString: function (data) {
            for (var i = 0; i < data.length; i++) {
                var dataString = data[i].string;
                this.versionSearchString = data[i].subString;

                if (dataString.indexOf(data[i].subString) !== -1) {
                    return data[i].identity;
                }
            }
        },
        searchVersion: function (dataString) {
            var index = dataString.indexOf(this.versionSearchString);
            if (index === -1) {
                return;
            }

            var rv = dataString.indexOf("rv:");
            if (this.versionSearchString === "Trident" && rv !== -1) {
                return parseFloat(dataString.substring(rv + 3));
            } else {
                return parseFloat(dataString.substring(index + this.versionSearchString.length + 1));
            }
        },

        dataBrowser: [
            {string: navigator.userAgent, subString: "Edge", identity: "MS Edge"},
            {string: navigator.userAgent, subString: "MSIE", identity: "Explorer"},
            {string: navigator.userAgent, subString: "Trident", identity: "Explorer"},
            {string: navigator.userAgent, subString: "Firefox", identity: "Firefox"},
            {string: navigator.userAgent, subString: "Opera", identity: "Opera"},  
            {string: navigator.userAgent, subString: "OPR", identity: "Opera"},  

            {string: navigator.userAgent, subString: "Chrome", identity: "Chrome"}, 
            {string: navigator.userAgent, subString: "Safari", identity: "Safari"}       
        ]
    };

    BrowserDetect.init();


    var bv= BrowserDetect.browser;
    if( bv == "Chrome"){
        $("body").addClass("chrome");
    }
    else if(bv == "MS Edge"){
     $("body").addClass("edge");
    }
    else if(bv == "Explorer"){
     $("body").addClass("ie");
    }
    else if(bv == "Firefox"){
     $("body").addClass("Firefox");
    }


$(".relative").click(function(){
$(".oc").toggle('slide', { direction: 'left', mode: 'show' }, 500);
$(".oc1").css({
   'width' : '100%',
   'margin-left' : '0px',
   });
});

.relative {
  background-color: red;
  height: 30px;
  position: relative;
  width: 30px;
}
.relative .child {
  left: 10px;
  position: absolute;
  top: 4px;
}
.oc {
  background: #ddd none repeat scroll 0 0;
  height: 300px;
  position: relative;
  width: 500px;
  float:left;
}
.oc1 {
  background: #ddd none repeat scroll 0 0;
  height: 300px;
  position: relative;
  width: 300px;
  float:left;
  margin-left: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<div class="relative">
<span class="child">
  ○
</span>
</div>
<div class="oc">
<div class="data"> </div>
</div>
<div class="oc1" style="display: block;">
<div class="data"> </div>
</div>

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)

I am using a sass mixin for chrome styles, this is for Chrome 29+ borrowing the solution from Martin Kristiansson above.

@mixin chrome-styles {
  @media screen and (-webkit-min-device-pixel-ratio:0)
    and (min-resolution:.001dpcm) {
      @content;
  }
}

Use it like this:

@include chrome-styles {
  .header { display: none; }
}

/* 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.