Combined inverted media queries

Question

I have sass code that generates a negated media query as follow (based on Exact NOT(Inverse) of CSS Media Query):

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

Why doesn't this work for the last div with combined classes?

<div class="phone">visible on: phone</div>
<div class="tablet">visible on: tablet</div>
<div class="phone tablet">visible on: phone and tablet</div>

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 can't set it back to it's previous value.

Example and source.

Linus Caldwell · Accepted Answer · 2016-01-23T11:34:06.710

<div class="phone tablet"/> cannot be visible any time, because all time at least one of your 2 media queries are matched, so this div gets a display: none from at least one of those.

One solution would be

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

Update to your Fiddle.

If you also want the div in question be hidden if both, .phone and .tablet are hidden, add

@media not screen and (max-width: 992px) {
    .phone.tablet {
        display: none; 
    } 
}

Another update to your Fiddle.

Combined inverted media queries

1 Answers1