In a previous article I wrote about a method to get a --depth
value based on alternating classes. But Roman Komarov found a better method to achieve a similar effect. I'll give a small spoiler about the method, but for the full break-down, you have to read the article.
* {
@container not style(--is-alternate: ) {
--is-alternate: ;
}
@container style(--is-alternate: ) {
--is-alternate: initial;
}
}
One caveat, it requires style queries to be support by your browser. We are not there yet, but it will come in the future.
Check it out