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

i have tab elements either display: inline or none depending if selected. eg:

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

then class in stylesheet overrides display property tabs shown in mobile devices:

.tab { display: block !important; } 

my problem need prevent condition apply screen bigger 600px cannot use max-width queries. need override display: block !important min-width media query without applying other particular style. eg:

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

if mark selected tab class name class='selected', can try way:

html:

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

css:

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

see demo