CODEWITHSUNDEEP
cssmedia-queries
user2587454
user2587454

Reputation: 913

How can i ignore media queries in css file?

I have a web project that use css file with media queries. one of the page is using the same css file but i don't want it to use the media queries on this css file. how can i ignore them?

Upvotes: 2

Views: 6166

Answers (2)

MistyDawn
MistyDawn

Reputation: 903

You can negate your selectors with the :not() attribute for the selectors you don't want the query style applied to in css like this...

.page{ /* Styles that apply to all ".page" elements before media query */ }

@media (min-width: 768px) {
  /* Defines styles for elements with the "page" class */
  .page:not(:first)     { 
      /* Excludes first matching element with "page" class */ }
  .page:not(.firstpage) { 
      /* Excludes elements with the "firstpage" class */ }
  .page:not(#firstpage) { 
      /* Excludes element with id="firstpage" */ }

Then if you want to do something with only the excluded page when the media query is activated, you can add...

   .page(:first) { } 
     /* or */
   .firstpage    { } 
     /* or */
   #firstpage    { }
}

Upvotes: 0

Danield
Danield

Reputation: 125443

If you want to ignore the media queries (and don't want to just comment them out -for some reason) then an easy way to do this is to move all the media queries to the top of the CSS file.

This way, the same classes will override the styles in the media queries. eg:

@media (max-width: 600px) { /* or whatever the media query is */
  .class {
    /*styles here */
  }
}
.class {
/*styles here */
}

Alternatively, (if the above method isn't possible), you could add specificity to the selectors (which the media queries select) eg:

.class.class {   /* <-- added specificity */
  /*styles here */
}

@media (max-width: 600px) { /* or whatever the media query is */
  .class {
    /*styles here */
  }
}

Now the .class selecter will override the media query and the media query will be ignored.

Upvotes: 3

Related Questions