How to apply specific CSS rules to Chrome only?

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>