title: How to target for Chrome only browsers CSS
body: <p>For some reason Chrome shows this span unusually higher than Firefox.</p>
  <p>As a result, I wrote the following CSS:</p>
  <pre><code>@media screen and (-webkit-min-device-pixel-ratio: 0) {
    .selector:not(*:root),
    span.justForChrome {
      display: block;
      margin-top: 23%;
      text-align: right;
    }
  }
  </code></pre>
  <p>The following is the HTML:</p>
  <pre><code>  &lt;li class=&quot;nav-item&quot;&gt;
      &lt;a
        class=&quot;nav-link&quot;
        data-toggle=&quot;tooltip&quot;
        title=&quot;Shopping cart&quot;
        id=&quot;{{ shoppingCart }}&quot;
        routerLink=&quot;/shopping-cart&quot;
        &gt;&lt;span class=&quot;justForChrome&quot;
          &gt;Shopping Cart&lt;span id=&quot;counter&quot;&gt;{{ counter }}&lt;/span&gt;&lt;/span
        &gt;&lt;/a
      &gt;
    &lt;/li&gt;
  </code></pre>
  <p>While this is working in Chrome, now Firefox is showing the span to high. If I set the margin-top to 100% in Firefox developer tools, then it is perfect, but margin-top at 100% on Chrome sends the span upwards.</p>
  <p>What can I do? I swear this was working a few weeks ago. I would expect that Firefox would not even find the span.justForChrome selector rule in the CSS</p>