CODEWITHSUNDEEP
cssmedia-queries
4thSpace
4thSpace

Reputation: 44352

Does Media Query override non Media Query?

If I use the following, do I need to explicitly specify a media query for above 450px?

//target above 450px
.classA {color:#fff;}
#elementB {display:block;}

//target 450px and below
@media (max-width:450px){
.classA {color:#000;}
#elementB {display:none;}
}

Is this considered good practice?

Upvotes: 0

Views: 88

Answers (1)

Mathijs Flietstra
Mathijs Flietstra

Reputation: 12974

To answer your first question first: No, you don't have to specifically specify a media query to target above 450px. The way you have it set up now, it will just use whatever is outside the media query on every width, and only use what is inside the media query if the width is 450px and below, this is fine as it looks like this is the result you are after.

Answering your second question, I haven't really used media queries that much myself, so don't take what I say as "good practice" gospel, but looking at your snippet of CSS. I think the only reason it currently works fine is because you positioned the media query and the classes inside it after the "regular classes" in the style sheet. If you turned that around (positioning the "regular classes" after the classes inside the media query), I believe your "regular classes" would always overwrite the media query, unless you stick them inside their own media query targeting only the above 450px width.

Upvotes: 1

Related Questions