CSS Media Query Execution

Question

I'm having an issue with a CSS media query where the general style is being applied after the media query despite being above the media query in the cascade.

Example:

HTML:

<div id="myblock1">
    <div>Block 1</div>
    <div id="myblock2">Block 2</div>
    <div>Block 3</div>
</div>

CSS:

#myblock1 div {
    display:block;
    background-color:#F00;
}

@media (min-width:600px) {
    #myblock2 {
        display:none;
    }
}

Live demo: jsFiddle

In theory, all 3 blocks should be visible in windows of 600px width or less, and when larger the middle block should disappear, but that is not the case. Any ideas on why the ID/media query is being applied before the general styling?

Madara's Ghost · Accepted Answer · 2012-10-04 17:06:43Z

3

That's because #myblock1 div is more specific than #myblock2 (1 ID + 1 element vs 1 ID).

You'll either need to be more specific, or add !important on the rule you're trying to override.

Be more specific: #myblock1 #myblock2 { display: none; }
Use !important: #myblock2 { display: none !important; }

In my opinion, the best solution would be to make the outer container less specific, by giving it a class name, rather than an ID:

<div class="myblock1">
    <div>Block 1</div>
    <div id="myblock2">Block 2</div>
    <div>Block 3</div>
</div>

Then, the following will work fine:

.myblock1 div {
    display:block;
    background-color:#F00;
}

@media (min-width:600px) {
    #myblock2 {
        display:none;
    }
}

edited Oct 4, 2012 at 17:06

answered Oct 3, 2012 at 21:09

Madara's Ghost

176k52 gold badges274 silver badges314 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

BoltClock Over a year ago

I wonder if people are going to start a debate in the comments here over whether it's worse practice to use multiple IDs for the sake of specificity or to use !important instead.

Devin Rodriguez Over a year ago

Both of these options work just fine, but I feel like they aren't quite right. In my experience IDs have always been the most specific way of applying something, and if you have to use !important you are doing something wrong, but in this case it's necessary. Thanks for the help!

Madara's Ghost Over a year ago

@BoltClock: I usually like to avoid !important. I think the proper solution in this case is to have the first container have a .className, and the second one (the more specific one) have an #id, then you don't have that problem (since #id > ∞.class)

Madara's Ghost Over a year ago

@DevinRodriguez: See the comment above for a more proper solution.

Blender · Accepted Answer · 2012-10-03 21:10:08Z

0

The specificity of your selector isn't high enough, so it isn't overriding your previous rule. Try this one instead:

@media (min-width:600px) {
    #myblock1 #myblock2 {
        display: none;
    }
}

Demo: http://jsfiddle.net/7aWpQ/2/

answered Oct 3, 2012 at 21:10

Blender

300k55 gold badges463 silver badges512 bronze badges

Comments

Sebass van Boxel · Accepted Answer · 2012-10-03 21:19:40Z

0

Add !important to display:none; than it's working.

#myblock1 div {
display:block;
background-color:#F00;
}

@media (min-width:600px) {
    #myblock2 {
        display:none!important;
    }
}

Note: Because the media query is less specific than your main css. ie. #myblock1 #myblock2 { display:none; } should also work

edited Oct 3, 2012 at 21:19

answered Oct 3, 2012 at 21:06

Sebass van Boxel

2,6221 gold badge24 silver badges37 bronze badges

3 Comments

Sebass van Boxel Over a year ago

Because the media query is less specific than your main css. ie. #myblock1 #myblock2 { display:none; } should also work

Madara's Ghost Over a year ago

I already know that (I'm not the one who asked the question), but you should include that piece of information in your answer, rather than on a comment :)

BoltClock Over a year ago

It's not the media query (or the @media rule) that's less specific, it's the selector inside that rule.

Collectives™ on Stack Overflow

CSS Media Query Execution

Example:

3 Answers 3

4 Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Example:

3 Answers 3

4 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related