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?

Solution

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.