<div class="wrapper">
<div id="container">
<div>Nest - Level1</div>
<div>
Nest - Level1
<div>Nest - Level2</div>
</div>
<div>
Nest - Level1
<div>
Nest - Level2
<div>Nest - Level3</div>
</div>
</div>
</div>
</div>
.wrapper {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
}
:scope {
color: blue;
}
View Compiled
const container = document.getElementById("container");
const Nest1Els = container.querySelectorAll(":scope > div");
Nest1Els.forEach((el) => {
el.style.margin = "20px 0 0";
});
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.