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; 
}
}

"_don't do anything_"? you might want to apply some other value to the display property. If it so, then use `div.tab` instead of just mentioning `.tab` and give `display: inline;` (or some other value). [side note] `!important` leads to bad designing. — Mr_Green, Aug 23 '13 at 15:11
I need to use !important to override all element style attributes. I don't see any other way of doing this. — lisovaccaro, Aug 23 '13 at 15:21
You can't reset the previous values using just css though.. check this [**link**](http://stackoverflow.com/a/8229026/1577396). — Mr_Green, Aug 23 '13 at 15:21

Vahid Hallaji · Accepted Answer · 2013-08-23T15:17:29.663

8

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

edited Aug 23 '13 at 15:17

answered Aug 23 '13 at 15:11

Vahid Hallaji

7,159
5
42
51

1

Adding a working demo is a really good way to show that your solution works. – cimmanon Aug 23 '13 at 15:14
I think this is a great solution. And I would do it like this have I written the js but it's using jquery-ui which add the style="display:block" or "display:none" instead of a class to the element. – lisovaccaro Aug 23 '13 at 15:26
1

I noticed jquery-ui uses `aria-expanded="true"` when a tab is selected so I'll use the attribute as .tab.selected. Thanks for your answer – lisovaccaro Aug 23 '13 at 15:27

score 0 · Answer 2 · answered Aug 23 '13 at 15:12

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;
    }
}

score -1 · Answer 3 · answered Aug 23 '13 at 15:09

First of all: do not use style="" on your HTML. You cannot override the css attributes from an external CSS, even using !important.

I recommend you using only external CSS files, then, let's say you want to override attributes the thing would come this way:

.tab {
display: inline;
}

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

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

3 Answers3