Startseite >CSS >CSS-Referenz – Eigenschaften, Selektoren, Funktionen >@scope

@scope

@scope (Wurzel) [to (Grenze)] { … }

Die Stile darin gelten nur für Elemente in der Wurzel des Geltungsbereichs – zum Beispiel in einer .card. Eine optionale untere Grenze (to (.content)) „schneidet“ einen Teil des Bereichs heraus: Die Stile reichen nicht in die Grenze hinein, eingebetteter Inhalt behält also sein eigenes Aussehen. Die Selektoren darin bleiben kurz und die Wurzel fügt ihnen keine Spezifität hinzu.

Werte

  • (Wurzel) – ein Selektor der Elemente, in denen die Stile gelten.
  • to (Grenze) – Elemente, die die Stile nicht mehr erreichen (auch die Grenze selbst nicht).
  • :scope – wählt im Block die Wurzel selbst; Spezifität 0-1-0.
  • @scope { … } ohne Klammern in einem Element <style> innerhalb der Seite – die Wurzel ist das Elternelement dieses Elements <style>.

Beispiele

Links und Überschriften einer Karte haben ein eigenes Aussehen, der von einem CMS in .content eingefügte Inhalt bleibt aber unverändert:

@scope (.card) to (.content) {
  :scope {
    padding: 12px;
    border: 1px solid #ddd;
  }
  h3 { color: #01579b; }
  a {
    color: #e91e63;
    text-decoration: none;
  }
}

Das Ergebnis: der Rahmen der Karte, eine blaue Überschrift und pinke Links ohne Unterstreichung – außer den Überschriften und Links in .content, die aussehen wie sonst auf der Seite.

Worauf Sie achten sollten

  • Neu: Chrome ab 118, Firefox ab 146, Safari ab 26.4 (in Safari 17.4–26.3 nur teilweise). Ältere Browser verwerfen den ganzen Block.
  • Der Selektor der Wurzel fügt keine Spezifität hinzu (anders als Verschachtelung oder .card a): Ein a in @scope (.card) hat nur 0-0-1.
  • Bei gleicher Spezifität entscheidet die Nähe: Es gewinnt die Regel aus dem Bereich, dessen Wurzel dem Element näher ist – ein in ein helles Thema verschachteltes dunkles Thema funktioniert so unabhängig von der Reihenfolge der Regeln. Eine Regel außerhalb von @scope mit gleicher Spezifität verliert gegen eine Regel in einem Bereich, auch wenn sie später steht.

Browserunterstützung

Baseline – neu verfügbar: in allen gängigen Browsern seit März 2026; ältere Browserversionen unterstützen es nicht. Ab Version: Chrome 118, Firefox 146, Safari 26 (vollständig seit 26.4). Stand: Oktober 2026 (MDN browser-compat-data).

Siehe auch:
Verschachtelung (&)
Spezifität und Kaskade
@layer
:root
Nachfahrenkombinator (Leerzeichen)