.a {
color: blue;
& > .b { color: red }
}
.a {
color: blue;
&.b { color: red }
}
.a, .b {
color: blue;
& + .c, &.d { color: red }
}
.a {
color: blue;
& .b & .c & .d { color: red }
}
.a {
color: blue;
& { padding: 2ch }
}
.a {
color: blue;
&& { padding: 2ch }
}
.e, #a {
&:hover > .c { color: red }
}
.a {
&:is(.b, &.c) { color: red }
}
figure {
margin: 0;
& > figcaption {
background: hsl(0 0% 0% / 50%);
& > p {
font-size: .9rem;
}
}
}
.a {
color: red;
@nest & > .b {
color: blue;
}
}
.a {
color: red;
@nest .f & {
color: blue;
}
}
.a {
color: red;
@nest :not(&) {
color: blue;
}
}
.a {
color: blue;
@nest .b & {
color: red;
&.c {
color: green;
}
}
}
.a {
display: grid;
@media (orientation: landscape) {
grid-auto-flow: column;
}
}
.a {
display: grid;
@media (orientation: landscape) {
grid-auto-flow: column;
@media (min-inline-size > 1024px) {
max-inline-size: 1024px;
}
}
}