<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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.