---
source: crates/biome_formatter_test/src/snapshot_builder.rs
info: css/nesting/nesting.css
---

# Input

```css
table.colortable {
	& td {
		text-align: center;
		&.c { text-transform:uppercase }
		&:first-child, &:first-child + td { border:1px solid black }
	}

	& th {
		text-align:center;
		background:black;
		color:white;
	}
}

.foo {
	color: blue;
	& > .bar { color: red; }
}

.foo {
	color: blue;
	&.bar { color: red; }
}

.foo, .bar {
	color: blue;
	& + .baz, &.qux { color: red; }
}

.foo {
	color: blue;
	& .bar & .baz & .qux { color: red; }
}

.foo {
	color: blue;
	& { padding: 2ch; }
}

/* TODO fix me */
/*.foo {*/
/*    color: blue;*/
/*    && { padding: 2ch; }*/
/*}*/

.error, #test {
	&:hover > .baz { color: red; }
}

.foo {
	&:is(.bar, &.baz) { color: red; }
}

figure {
	margin: 0;

	& > figcaption {
		background: hsl(0 0% 0% / 50%);

		& > p {
			font-size: .9rem;
		}
	}
}

.foo {
	color: blue;
	&__bar { color: red; }
}

.foo {
	color: red;

	.bar {
		color: blue;
	}
}

.foo {
	color: red;

	+ .bar {
		color: blue;
	}
}

.foo {
	color: blue;
	& > .bar { color: red; }
	> .baz { color: green; }
}

div {
	color: red;

	& input { margin: 1em; }
	/* valid, no longer starts with an identifier */

	:is(input) { margin: 1em; }
	/* valid, starts with a colon,
		 and equivalent to the previous rule. */
}

.foo, .bar {
	color: blue;
	+ .baz, &.qux { color: red; }
}

.foo {
	color: blue;
	& .bar & .baz & .qux { color: red; }
}

.foo {
	color: red;
	.parent & {
		color: blue;
	}
}

.foo {
	color: red;
	:not(&) {
		color: blue;
	}
}

.foo {
	color: red;
	+ .bar + & { color: blue; }
}

.ancestor .el {
	.other-ancestor & { color: red; }
}

.foo {
	& :is(.bar, &.baz) { color: red; }
}

@layer base {
	html {
		block-size: 100%;

		& body {
			min-block-size: 100%;
		}
	}
}

@layer base {
	html {
		block-size: 100%;

		@layer base.support {
			& body {
				min-block-size: 100%;
			}
		}
	}
}

article {
	color: green;
	& { color: blue; }
	color: red;
}

.foo {
	color: red;
	@media (min-width: 480px) {
		& h1, & h2 {
			color: blue;
		}
	}
}

```


=============================

# Outputs

## Output 1

-----
Indent style: Tab
Indent width: 2
Line ending: LF
Line width: 80
Quote style: Double Quotes
-----

```css
table.colortable {
	&td {
		text-align: center;
		&.c {
			text-transform: uppercase;
		}
		&:first-child,
		&:first-child + td {
			border: 1px solid black;
		}
	}

	&th {
		text-align: center;
		background: black;
		color: white;
	}
}

.foo {
	color: blue;
	& > .bar {
		color: red;
	}
}

.foo {
	color: blue;
	&.bar {
		color: red;
	}
}

.foo,
.bar {
	color: blue;
	& + .baz,
	&.qux {
		color: red;
	}
}

.foo {
	color: blue;
	&.bar &.baz &.qux {
		color: red;
	}
}

.foo {
	color: blue;
	& {
		padding: 2ch;
	}
}

/* TODO fix me */
/*.foo {*/
/*    color: blue;*/
/*    && { padding: 2ch; }*/
/*}*/

.error,
#test {
	&:hover > .baz {
		color: red;
	}
}

.foo {
	&:is(.bar, &.baz) {
		color: red;
	}
}

figure {
	margin: 0;

	& > figcaption {
		background: hsl(0 0% 0% / 50%);

		& > p {
			font-size: .9rem;
		}
	}
}

.foo {
	color: blue;
	&__bar {
		color: red;
	}
}

.foo {
	color: red;

	.bar {
		color: blue;
	}
}

.foo {
	color: red;

	+ .bar {
		color: blue;
	}
}

.foo {
	color: blue;
	& > .bar {
		color: red;
	}
	> .baz {
		color: green;
	}
}

div {
	color: red;

	&input {
		margin: 1em;
	}
	/* valid, no longer starts with an identifier */

	:is(input) {
		margin: 1em;
	}
	/* valid, starts with a colon,
		 and equivalent to the previous rule. */
}

.foo,
.bar {
	color: blue;
	+ .baz,
	&.qux {
		color: red;
	}
}

.foo {
	color: blue;
	&.bar &.baz &.qux {
		color: red;
	}
}

.foo {
	color: red;
	.parent & {
		color: blue;
	}
}

.foo {
	color: red;
	:not(&) {
		color: blue;
	}
}

.foo {
	color: red;
	+ .bar + & {
		color: blue;
	}
}

.ancestor .el {
	.other-ancestor & {
		color: red;
	}
}

.foo {
	&:is(.bar, &.baz) {
		color: red;
	}
}

@layer base {
	html {
		block-size: 100%;

		&body {
			min-block-size: 100%;
		}
	}
}

@layer base {
	html {
		block-size: 100%;

		@layer base.support {
			&body {
				min-block-size: 100%;
			}
		}
	}
}

article {
	color: green;
	& {
		color: blue;
	}
	color: red;
}

.foo {
	color: red;
	@media (min-width: 480px) {
		&h1,
		&h2 {
			color: blue;
		}
	}
}
```