I want media queries to be usable as selectors

I want media queries to be usable directly as part of CSS selectors so that I can combine environmental conditions and class-based overrides without duplicating rule blocks.

Today, when I want to support both an automatic dark mode (via prefers-color-scheme) and a manual .dark-mode class toggle, I am forced to write the same declarations twice:

p { color: black; }

.dark-mode p { color: white; }

@media (prefers-color-scheme: dark) {
  p { color: white; }
}

I propose that @media conditions should be valid at the start of a selector list, allowing the last two rules above to be merged into a single rule:

@media (prefers-color-scheme: dark) p,
.dark-mode p {
  color: white;
}

Combined with CSS Nesting — which is already shipping in browsers — the same intent could be expressed even more concisely:

@media (prefers-color-scheme: dark),
.dark-mode {
  p { color: white; }
}

This change would make stylesheets shorter, easier to maintain, and less error-prone: there is only one place to update when the dark-mode palette changes. It would also clarify the relationship between responsive design conditions and class-based JavaScript overrides, a pattern that nearly every real-world project relies on.