Media Query Specificity

...or lack thereof

by pmn4

HTML

<div class="container">
    <h1>TIL!:</h1>
    <p>Media Queries do not add specificity to your css selectors.</p>
    <p>No matter the screen size, the title will remain blue, whereas this text will toggle between blue and red</p>
    <p>each selector in the CSS has the exact same specificity, so the one that comes last wins.</p>
    <p>putting all media-queried code last means that it will always win specificty ties</p>
</div>

<em class="instructions">← slide this divider to see the media queries in action </em>

CSS

@media screen and (max-width: 600px) {
    .container h1 {
        color: red;
    } 
}

.container h1 {
    color: blue;
}

/* media queries last give the desired result: */
.container p {
    color: blue;
}

@media screen and (max-width: 600px) {
    .container p {
        color: red;
    } 
}



/* --- ignore --- */
.instructions {
    position: absolute;
    bottom: 0;
    left: 0;
    background: #eee;
}