DEV Community

Pacharapol Withayasakpunt
Pacharapol Withayasakpunt

Posted on

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

I am currently using new.css and Bulma.

Top comments (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!