When working with stylesheets, the majority of CSS rules follow a structured format:
selector {
property_1 : value_1;
.
.
.
property_n : value_n;
}
Each selector typically has only one {} block attached to it (without any sub {} blocks inside), which we can refer to as degree of nesting = 1.
However, when it comes to at-rules, we encounter more complex structures like this:
@media screen and (min-width:1000px) {
body {
font-size: 20px;
}
}
In such cases, there is a nested CSS block within the @media rule, increasing the degree of nesting to 2.
The highest level of nesting I have seen is with a nesting degree of 3, demonstrated here:
@media screen and (min-width:1000px) {
@keyframes myidentifier {
0% { top: 0; left: 0; }
100% { top: 100px; left: 100%; }
}
}
It raises the question: Can CSS blocks be nested even deeper than this example?