CodePen Embed - child-combinators css (sitepoint)

<body>
  <div class="header"></div>
  <div class="content">
    <div class="new">
      <div class="header"></div>
      <div class="content"></div>
      <div class="footer"></div>
    </div>
  </div>
  <div class="footer"></div>
</body>

body > .header {
  width: 400px;
  height: 50px;
  background-color: DarkSlateGray;
  border: 5px solid gold;
}

.new > .header {
  width: 600px;
  height: 100px;
  background-color: MediumTurquoise;
  /* border has not cascaded down */
}

Run Pen

This Pen is owned by Russell on CodePen.

See more by @rpg2019 on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.