Defining CSS media queries within selectors

Question

Are there any issues (performance is my primary concern) if instead of defining css selectors within media queries (example 1), you define media queries within css selectors (ex

Answer 1

The issue is it doesn't work! Things may have changed over the years. I tried putting media queries inside the selectors, at least Firefox complains its an invalid property name.

Here's what MDN says:

The @media at-rule may be placed at the top level of your code or nested inside any other conditional group at-rule.

It can only be nested inside another conditional group at-rule.