This content originally appeared on Manuel Matuzović - Web development blog and was authored by Manuel Matuzović
Nesting in CSS is coming soon! For me personally not the killer feature, at least compared to cascade layers or container queries, but still exciting. Let’s see how it works.
The most important thing to know about native nesting in CSS is that the nested selector always must start with a symbol (. # : [ * + > ~) because of limitations in browser parsing engines.
The following code doesn't work:
/* Doesn't work */
ul {
li {
border-color: green;
}
}To work around that limitation the nested selector can start with an &.
ul {
& li {
border-color: green;
}
}
/*
Same as:
ul li { }
*/Besides this limitation, everything works as expected for me. Here are some of the things I've tested:
a {
&:hover {
background-color: aqua;
}
&:focus-visible {
background-color: aqua;
}
}
/*
Same as:
a:hover { }
a:focus-visible { }
*/a {
&:is(:hover, :focus-visible) {
background-color: aqua;
}
}
/*
Same as:
a:is(:hover, :focus-visible) { }
*/h2 {
font-family: sans-serif;
&::first-letter {
color: red;
}
}
/*
Same as:
h2 { }
h2::first-letter { }
*/h2 {
& + p {
background-color: red;
}
}
/*
Same as:
h2 + p { }
*/h2 {
.parent & {
background-color: aqua;
}
}
/*
Same as:
.parent h2 { }
*/h2 {
@media (min-width: 400px) {
background: red;
}
}
/*
Same as:
@media (min-width: 400px) {
h2 { }
}
*/h2 {
@media (min-width: 400px) {
background: red;
&::before {
content: "!";
color: #fff;
}
& ~ p {
& span {
background-color: #000;
}
:is(span) {
color: #fff;
}
}
}
}
/*
Same as:
@media (min-width: 400px) {
h2 { }
h2::before { }
h2 ~ p span { }
h2 ~ p :is(span) { }
}
*/div {
& & & h3 {
background-color: green;
}
}
/*
Same as:
div div div h3 { }
*/h3 {
:is(div) & {
color: #fff;
}
}
/*
Same as:
:is(div) h3 { }
*/a {
&[download] {
border: 1px solid red;
}
}
/*
Same as:
a[download] { }
*/You can try it today in Chrome Dev, Safari Technology Preview, or Polypane 13.
My blog doesn't support comments yet, but you can reply via blog@matuzo.at.
This content originally appeared on Manuel Matuzović - Web development blog and was authored by Manuel Matuzović
Manuel Matuzović | Sciencx (2023-02-09T09:38:54+00:00) Day 99: native nesting. Retrieved from https://www.scien.cx/2023/02/09/day-99-native-nesting/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.