DEV Community

loading...

How do I override "prefer-color-scheme" media query on CSS I didn't make? (e.g. classless CSS)

Pacharapol Withayasakpunt
Currently interested in TypeScript, Vue, Kotlin and Python. Looking forward to learning DevOps, though.
・1 min read

I am currently using new.css and Bulma.

Discussion (1)

Collapse
shadowfaxrodeo profile image
Nathaniel

My understanding of media queries is that they don't have specificity, meaning any matching css rule placed after them in the document even if it doesn't use a media query will take precedence over the media query.

If you can't place your css after the media query then you have to either use a higher level of specificity, or an !important tag.

So if the emdia query is something like:

@media only screen and (prefers-color-scheme: dark) {
    p { 
        color:red
    }
}
Enter fullscreen mode Exit fullscreen mode

you can override that with any of the following…

p.classname  {
    color:blue
}

section > p {
     color:blue
}

p {
   color:blue !important;
}
Enter fullscreen mode Exit fullscreen mode

Someone correct me if I'm wrong!