Why don't CSS media queries follow the normal conventions of inheritance and cascade?

Question

I've been having some issues with my CSS3 media queries...

Here's a small snippet of one I'm currently working on:

@media only screen 
and (max-width : 420px) {
    .page { min-width: 300px; max-width: 480px; width: 100%; }
    .page .alpha { font-size: 2em; }

    /* Set-up the column */
    .page .column { margin: 0 auto 2%; width: auto; }
    .page .gallery .column { min-height: 470px; height: auto; padding: 2%; }
}

/* Increase the main title for slightly larger screens! */
@media only screen 
and (max-width : 480px) {
    .page .alpha { font-size: 3em; }
}

I'm working from a 'mobile first' standpoint and given the normal behaviour of CSS regarding the 'cascading' aspect I would expect the second @media statement to inherit all of the styles from the previous statement, whilst overriding any for which it has a matching or 'heavier' selector.

(Plus CSS's order of precedence would mean any matching style definitions would use the last defined rule-set unless 'trumped' with an !important statement!)

From what I've seen though, through testing and some Google / SE searches this is not the case.

Is it possible for @media style rules to inherit from applicable earlier statements or am I stuck with having to repeat all the rules I need for each statement? (not very DRY)

I'd really appreciate any help and clarifications / explanations for this.

Answer 1

Firstly thanks @BoltClock (for both comments), and to the other comments and answers for all your help.

I think I made a mistake in my media queries and/or was miss-understanding how they worked and interacted together. I was going to edit my question with the following but decided it would make more sense as an answer (since it's the solution I used). I apologise if this has wasted anyone else's time.

Here's my fixed snippet of code:

@media only screen 
and (max-width : 480px) {
    .page { min-width: 300px; max-width: 480px; width: 100%; }
    .page .alpha { font-size: 2em; }

    /* Set-up the column */
    .page .column { margin: 0 auto 2%; width: auto; }
    .page .gallery .column { min-height: 470px; height: auto; padding: 2%; }
}
/* Increase the main title for slightly larger screens! */
@media only screen 
and (min-width : 421px)
and (max-width : 480px) {
    .page .alpha { font-size: 3em; }
}

I realised from your comments that if I increased the max-width in my first block to cover the necessary range/limit I could then either nest or add the second block after it (I tried both and they both worked for me -- using chromium browser [18.0.1025.151]). This successfully gave me the desired result, in that the page .alpha element's font size increased at the required stepping/interval.

Thanks again for all SO'ers who helped! (and to SE for the awesome communities they've helped build)

Knowledge > OpenSource > Freedom