Combined inverted media queries
<p>I have sass code that generates a negated media query as follow (based on <a href="https://stackoverflow.com/questions/5766069/exact-notinverse-of-css-media-query">Exact NOT(Inverse) of CSS Media Query</a>):</p>

<pre><code>@media not screen and (max-width: 420px) {
    .phone {
        display: none; 
    } 
}
@media not screen and (min-width: 421px) and (max-width: 992px) {
    .tablet {
        display: none; 
    } 
}
</code></pre>

<p>Why doesn't this work for the last div with combined classes?</p>

<pre><code>&lt;div class="phone"&gt;visible on: phone&lt;/div&gt;
&lt;div class="tablet"&gt;visible on: tablet&lt;/div&gt;
&lt;div class="phone tablet"&gt;visible on: phone and tablet&lt;/div&gt;
</code></pre>

<p>The reason I'm inverting the logic is because if I would do it the other way around (showing instead of hiding). I wouldn't know what display type each element would be (block, inline, etc) and I <a href="https://stackoverflow.com/questions/8228980/reset-css-display-property-to-default-value">can't set it back to it's previous value</a>.</p>

<p><a href="https://jsfiddle.net/tgLvxsw8/show" rel="nofollow noreferrer">Example</a> and <a href="https://jsfiddle.net/tgLvxsw8/" rel="nofollow noreferrer">source</a>.</p>