Scope

index.html

<div class="main-content">
  <h2>Hauptinhalts-Titel</h2>
  <p>Das ist der erste Absatz.</p>
  <div class="sidebar">
    <h2>Sidebar Titel</h2>
    <p>Inhalt der Sidebar.</p>
  </div>
  <p>Das ist der zweite Absatz im Hauptinhalt.</p>
</div>

scope.markdown

Scope

A Pen by uli schaeffler on CodePen.

License.

style.css

@scope (.main-content) to (.sidebar) {
  /* Diese Regeln gelten für Elemente innerhalb von .main-content, ABER NICHT für Elemente innerhalb von .sidebar (oder deren Nachfahren) */

  h2 {
    color: teal; /* Beeinflusst nur den h2 im main-content */
  }

  p {
    font-style: italic; /* Beeinflusst nur die p-Elemente im main-content, NICHT die p-Elemente in der sidebar */
  }
}

/* Globale Styles */
h2 {
  color: black;
}

.sidebar p {
  color: gray;
}