Why don't media queries override normal CSS? [duplicate]

Question

Do I need to add !important to all properties in the media queries I've written for my site like in the example below?

I had the CSS below at the bottom of my stylesheet, but I found that these properties did not reflect my design until I added the !important tags. I understand that using the !important tag is not best practice.

CSS

.loginbar {
    padding: 20px;
}
.logo {
    display: inline-block;
}

@media screen and (max-width: 1042px) {
        .loginbar {
            padding: 10px !important;
        }
        .logo {
            diplay: none !important;
        }
    }

HTML

    <div class=".logo"></div>
    <div class="loginbar"><a href="#">Log In | Sign Up</a></div>

Rattish

Definitely not required unless someone has overridden something – Dardar

They are not necessary. Do you have your media queries below the regular styling? Are you using the same specificity, i.e. .element vs .element .element? – Knipe

Nop it isn't necessary you just need to guarantee higher specificity, the first step you already have it those styles after and now be sure you have the same or more complex selector. – Nethermost

This would depend on where these are defined. Make sure the css file is imported last, or, if you have one file, that they are defined at the bottom. – Predicant

As others have commented, it is not a requirement - maybe post the selectors which values are enforced as part of the question and we can offer a better, more specific answer. – Perfuse

can you supply the minimal amount of html / css for us to duplicate the issue you are having? – Catarrhine

Answer 1

In theory, no - you don't need the !important flag. The issue you are probably experiencing arrises from specificity:

Specificity is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied. Specificity is based on the matching rules which are composed of different sorts of CSS selectors

Mozzila

The basic math (hugely simplified) behind specificity is a weighted approach.

id is worth 100, class is worth 10, tag is worth 1.

Therefore a.class (tag + class = 11) is less specific that a#id (tag + id = 101).

CSS is also applied in a last-match-wins format, that is to say that the style for the last declared selector that matches will be applied (sorted according to the above specificity).

So - in your example, it could be that there are elements on you page with the class .element which is being targeted with a more specific selector (such as .container div > ul li + li .element (which is a lot more specific than just .element) so the styles from that is overriding the styles from your media style.

The caveat to this, is if the !important flag is being used. In which case the only way to override the styles is to supply the !important flag again.

Catarrhine

I think that your explanation is over-simplifying a bit, in that it is not "basic math" - e.g. 101 classes does not add up to 101 and therefore have a higher specificity than an ID. So, while you quote Mozilla correctly, your math assumption is incorrect. You are also speculating (probably correctly) about the reason for the behaviour and OP should probably inspect which selectors' rules are enforced and post that CSS as part of the question. – Perfuse

I did oversimplify the math. If I recall correctly the selector weight is base 256 not base 10. Meaning you need 256 classes to override one id. You are correct, though - I am speculating. @Rattish - can you supply the minimal amount of html / css for us to duplicate the issue you are having? – Catarrhine

There's a handy CSS specificity calculator here: specificity.keegan.st, but it is limited to single selectors. – Frear

@richard supplied more code to help replicate my issue here. i am only working with classes at the moment so this makes sense. would i need to make special ID's for all of the elements that I want changed with my media queries in order to get rid of the '!important' tags? – Rattish