diff --git a/packages/uniwind/src/bundler/artifacts/css/variants.ts b/packages/uniwind/src/bundler/artifacts/css/variants.ts
index 6bfbf0b0..d66af8e0 100644
--- a/packages/uniwind/src/bundler/artifacts/css/variants.ts
+++ b/packages/uniwind/src/bundler/artifacts/css/variants.ts
@@ -4,7 +4,7 @@ const generateCSSForVariants = () => {
     let css = ''
 
     variants.forEach(variant => {
-        css += `@custom-variant ${variant} (${variant === 'web' ? 'html &' : `@media ${variant}`});\n`
+        css += `@custom-variant ${variant} (${variant === 'web' ? '@supports selector(div > div)' : `@media ${variant}`});\n`
     })
 
     return css
diff --git a/packages/uniwind/src/bundler/css-processor/processor.ts b/packages/uniwind/src/bundler/css-processor/processor.ts
index 3bea19d2..c8b3bb86 100644
--- a/packages/uniwind/src/bundler/css-processor/processor.ts
+++ b/packages/uniwind/src/bundler/css-processor/processor.ts
@@ -232,7 +232,8 @@ export class ProcessorBuilder {
             return
         }
 
-        if (rule.type === 'supports') {
+        // Skip web: variant
+        if (rule.type === 'supports' && rule.value.condition.value !== 'div > div') {
             rule.value.rules.forEach(rule => this.parseRuleRec(rule))
 
             return
diff --git a/packages/uniwind/uniwind.css b/packages/uniwind/uniwind.css
index 095d6f4b..0589cf66 100644
--- a/packages/uniwind/uniwind.css
+++ b/packages/uniwind/uniwind.css
@@ -1,6 +1,6 @@
 @custom-variant ios (@media ios);
 @custom-variant android (@media android);
-@custom-variant web (html &);
+@custom-variant web (@supports selector(div > div));
 @custom-variant native (@media native);
 @custom-variant tv (@media tv);
 @custom-variant android-tv (@media android-tv);