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; }
}
.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; }
:is(input) { margin: 1em; }
}
.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;
}
}
}