CODEWITHSUNDEEP
cssmedia-queriescss-specificity
zmii
zmii

Reputation: 4277

Override styles in media queries with custom CSS

I'm writing some overrides.css for existing system and want to know what are the ways I can override some styles. I don't have access to system css so I can't rewrite it.

If I have the following definitions in the original system:

#criterionDetailsWrapper {
    background-color: green;
}

@media screen and (max-width: 979px) {
    #criterionDetailsWrapper {
        background-color: blue;
    }
}


@media screen and (max-width: 667px) {
    #criterionDetailsWrapper {
        background-color: grey;
    }
}

How Can I override these styles e.g. to have

I. One property overridden for all dimensions:

.criterionDetailsWrapper {
   background-color: grey;
}

II. Override one property change to not have 2 break points to but only 1 break point e.g. at 600px?

#criterionDetailsWrapper {
   background-color: grey;
}


 @media screen and (max-width: 600px) {
    #criterionDetailsWrapper {
        background-color: blue;
    }
}

Is !important the only way to do it, or I need to mimic all selector (to get same specificity) and ensure that my custom CSS is rendered the last?

Upvotes: 0

Views: 5609

Answers (2)

Olaf
Olaf

Reputation: 531

Actually media queries do not make specificity higher. That's the reason You declare them after the declaration they are modifying. So declaring them in Your css style should be enough, as long as you address all the properties contained in media queries (and their specificity is still the same).

Remember to load overrides.css after the styles you want to override.

Also the ugly hack (but completely in line with the css specs), alows You to battle specificity by chaining class and id selectors with themselves.

.class.class has higher specificty than .class, but lower than .class.class.class.

It is bad, but may cause less problems than !important.

In Your case, examples you proposed should work as long as override.css comes after the stylesheet(s) You modify.

// orginal.css
#criterionDetailsWrapper {
    background-color: green;
}

@media screen and (max-width: 979px) {
    #criterionDetailsWrapper {
        background-color: blue;
    }
}


@media screen and (max-width: 667px) {
    #criterionDetailsWrapper {
        background-color: grey;
    }
}

would be overwritten by:

// override.css
#criterionDetailsWrapper {
    background-color: grey;
}

On any screen size it will be grey now.

// override.css
#criterionDetailsWrapper {
   background-color: grey;
}


@media screen and (max-width: 600px) {
    #criterionDetailsWrapper {
        background-color: blue;
    }
}

It will have grey background now, unless the screen size is up to 600px, when it will have blue color. 979px and 667px will be ignored.

More on the topic:

Calculating specificity - W3C spec

Upvotes: 4

Renzo Calla
Renzo Calla

Reputation: 7696

I: I will recommend to add as you said specificity inspecting the element, you can make sure that your class will have priority. 

.parents ....  #criterionDetailsWrapper {
   background-color: grey;
}

using !important is a bad practice but still valid...

II: You can't undefine a css media query instead you can overwrite it as your wish

@media screen and (max-width: 600px) {
    .parents...  #criterionDetailsWrapper {
        background-color: blue;
    }
}

and then define your new media querys

Upvotes: 2

Related Questions