Remove a class property with a media query on a mobile first design?

Question

I have tab elements with either display: inline or none depending if they are selected. Eg:

<div class="tab" style="display:inline;"></div>
<div class="tab" style="display:none;"></div>

Then a class in my stylesheet overrides the display property so that all tabs are shown in mobile devices:

.tab {
display: block !important;
}

My problem is that I need to prevent this condition to apply to screen bigger than 600px but I cannot use max-width queries. So I need to override display: block !important with a min-width media query without applying any other particular style. Eg:

@media screen and (min-width: 600px){
.tab  {
display: /*don't do anything*/ !important; 
}
}

Answer 1

If you mark selected tab by class name class='selected', can try this way:

HTML:

<div class="tab selected">1</div>
<div class="tab">2</div>
<div class="tab">3</div>

CSS:

.tab {
    display: block;
}

@media screen and (min-width: 600px){
    .tab  {
        display: none;
    }
    .tab.selected {
        display: inline-block;
    }
}

See demo

Answer 2

I think it is better to avoid using inline styles and !important whenever possible try something like:

Working Example

HTML

<div class="tab selected">Hello world!</div>
<div class="tab">Good bye world!</div>

CSS

.tab {
    display: inline-block;
}
@media screen and (min-width: 600px) {
    .tab {
        display: none;
    }
    .selected {
        display:inline-block;
    }
}