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;
		}
	}
}