@@ -203,36 +203,36 @@ Direct Nesting {#direct}
203
203
& > .bar { color: red; }
204
204
}
205
205
/* equivalent to
206
- .foo { color: blue; }
207
- .foo > .bar { color: red; }
206
+ .foo { color: blue; }
207
+ .foo > .bar { color: red; }
208
208
*/
209
209
210
210
.foo {
211
211
color: blue;
212
212
&.bar { color: red; }
213
213
}
214
214
/* equivalent to
215
- .foo { color: blue; }
216
- .foo.bar { color: red; }
215
+ .foo { color: blue; }
216
+ .foo.bar { color: red; }
217
217
*/
218
218
219
219
.foo, .bar {
220
220
color: blue;
221
221
& + .baz, &.qux { color: red; }
222
222
}
223
223
/* equivalent to
224
- .foo, .bar { color: blue; }
225
- :is(.foo, .bar) + .baz,
226
- :is(.foo, .bar).qux { color: red; }
224
+ .foo, .bar { color: blue; }
225
+ :is(.foo, .bar) + .baz,
226
+ :is(.foo, .bar).qux { color: red; }
227
227
*/
228
228
229
229
.foo {
230
230
color: blue;
231
231
& .bar & .baz & .qux { color: red; }
232
232
}
233
233
/* equivalent to
234
- .foo { color: blue; }
235
- .foo .bar .foo .baz .foo .qux { color: blue; }
234
+ .foo { color: blue; }
235
+ .foo .bar .foo .baz .foo .qux { color: blue; }
236
236
*/
237
237
238
238
.foo {
@@ -245,24 +245,24 @@ Direct Nesting {#direct}
245
245
246
246
// and
247
247
248
- .foo {
249
- color: blue;
250
- padding: 2ch;
251
- }
248
+ .foo {
249
+ color: blue;
250
+ padding: 2ch;
251
+ }
252
252
*/
253
253
254
254
.error, #404 {
255
255
&:not(.foo,.bar) > .baz { color: red; }
256
256
}
257
257
/* equivalent to
258
- :is(.error, #404):not(.foo,.bar) > .baz { color: red; }
258
+ :is(.error, #404):not(.foo,.bar) > .baz { color: red; }
259
259
*/
260
260
261
261
.foo {
262
262
&:is(.bar, &.baz) { color: red; }
263
263
}
264
264
/* equivalent to
265
- .foo:is(.bar, .foo.baz) { color: red; }
265
+ .foo:is(.bar, .foo.baz) { color: red; }
266
266
*/
267
267
268
268
figure {
@@ -277,9 +277,9 @@ Direct Nesting {#direct}
277
277
}
278
278
}
279
279
/* equivalent to
280
- figure { margin: 0; }
281
- figure > figcaption { background: hsl(0 0% 0% / 50%); }
282
- figure > figcaption > p { font-size: .9rem; }
280
+ figure { margin: 0; }
281
+ figure > figcaption { background: hsl(0 0% 0% / 50%); }
282
+ figure > figcaption > p { font-size: .9rem; }
283
283
*/
284
284
285
285
main {
@@ -293,8 +293,8 @@ Direct Nesting {#direct}
293
293
}
294
294
}
295
295
/* equivalent to
296
- main > :is(section, article) { background: white; }
297
- main > :is(section, article) > header { font-size: 1.25rem; }
296
+ main > :is(section, article) { background: white; }
297
+ main > :is(section, article) > header { font-size: 1.25rem; }
298
298
*/
299
299
</pre>
300
300
@@ -318,14 +318,14 @@ Direct Nesting {#direct}
318
318
&&.bar { color: blue; }
319
319
}
320
320
/* Invalid because the 1st & is no longer
321
- at the start of a compound selector */
321
+ at the start of a compound selector */
322
322
323
323
.foo {
324
324
color: red;
325
325
&.bar, .baz { color: blue; }
326
326
}
327
327
/* Invalid because the second selector in the list doesn't
328
- contain a nesting selector. */
328
+ contain a nesting selector. */
329
329
</pre>
330
330
</div>
331
331
@@ -383,8 +383,8 @@ The Nesting At-Rule: ''@nest'' {#at-nest}
383
383
}
384
384
}
385
385
/* equivalent to
386
- .foo { color: red; }
387
- .foo > .bar { color: blue; }
386
+ .foo { color: red; }
387
+ .foo > .bar { color: blue; }
388
388
*/
389
389
390
390
.foo {
@@ -394,8 +394,8 @@ The Nesting At-Rule: ''@nest'' {#at-nest}
394
394
}
395
395
}
396
396
/* equivalent to
397
- .foo { color: red; }
398
- .parent .foo { color: blue; }
397
+ .foo { color: red; }
398
+ .parent .foo { color: blue; }
399
399
*/
400
400
401
401
.foo {
@@ -405,8 +405,8 @@ The Nesting At-Rule: ''@nest'' {#at-nest}
405
405
}
406
406
}
407
407
/* equivalent to
408
- .foo { color: red; }
409
- :not(.foo) { color: blue; }
408
+ .foo { color: red; }
409
+ :not(.foo) { color: blue; }
410
410
*/
411
411
</pre>
412
412
@@ -428,7 +428,7 @@ The Nesting At-Rule: ''@nest'' {#at-nest}
428
428
}
429
429
}
430
430
/* Invalid because not all selectors in the list
431
- contain a nesting selector */
431
+ contain a nesting selector */
432
432
</pre>
433
433
</div>
434
434
0 commit comments