DEV Community

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

View post
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!