diff --git a/css-nesting-1/Overview.bs b/css-nesting-1/Overview.bs index 5b6bbec2216..4ec29682d67 100644 --- a/css-nesting-1/Overview.bs +++ b/css-nesting-1/Overview.bs @@ -432,6 +432,94 @@ The Nesting At-Rule: ''@nest'' {#at-nest} +Nesting Conditional Rules {#conditionals} +----------------------------------------------- + + A style rule can have any number of conditional rules inside of it, of any type, + intermixed with any number of declarations, in any order. + + The presence of a nested conditional engages the same logic as if ''@nest'' was present. + The nested conditional rules must contain a nesting selector and follow the same + rules as outlined in direct nesting. + +
+ For example, the following conditional nestings are valid: + + 
+    .foo {
+      display: grid;
+
+      @media (orientation: landscape) {
+        & { 
+          grid-auto-flow: column; 
+        }
+      }
+    }
+    /* equivalent to
+       .foo { display: grid; }
+
+       @media (orientation: landscape) {
+         .foo { 
+           grid-auto-flow: column; 
+         }
+       }
+     */
+
+    .foo {
+      color: red;
+
+      @media (min-width: 480px) {
+        & > .bar,
+        & > .baz { 
+          color: blue;
+        }
+      }
+    }
+    /* equivalent to
+       .foo { color: red; }
+
+       @media (min-width: 480px) {
+         .foo > :is(.bar, .baz) { 
+           color: blue;
+         }
+       }
+     */
+
+ + But the following are invalid: + + 
+    .foo {
+      display: grid;
+
+      @media (orientation: landscape) {
+        grid-auto-flow: column;
+      }
+    }
+    /* Invalid because there's no nesting selector */
+
+    .foo {
+      color: red;
+      
+      @media (min-width: 480px) {
+        & h1, h2 { color: blue; }
+      }
+    }
+    /* Invalid because not all selectors in the list
+       contain a nesting selector */
+
+    .foo {
+      color: red;
+      
+      @nest @media (min-width: 480px) {
+        & { color: blue; }
+      }
+    }
+    /* Invalid because @nest expects a selector prelude, 
+       instead a conditional rule was provided */
+
+
+ Mixing Nesting Rules and Declarations {#mixing} ----------------------------------------------- @@ -440,7 +528,8 @@ Mixing Nesting Rules and Declarations {#mixing} intermixed with any number of declarations, in any order. - The relative ordering of nested style rules and other declarations is important; + The relative ordering of nested style rules, nested conditional rules and + other declarations is important; it's possible for a given style rule and a nested style rule within it to match the same element, and if the specificity of the two rules is otherwise equivalent, the relative order in the stylesheet of the applicable declarations