CSS/Selektoren/Schachtelungs-Selektor

Der Schachtelungs-Selektor ermöglicht es, in eine Regel weitere Regeln zu schachteln. Diese inneren Regeln verwenden den gleichen Selektor wie die äußere Regel und erweitern ihn um weitere Komponenten. Das Zeichen & wird dabei im Selektor der inneren Regel als Repräsentant für den Selektor der äußeren Regel verwendet. Seine Verwendung ist allerdings nicht immer erforderlich, der unter „Siehe auch“ verlinkte Artikel geht darauf ein.

Syntax	&
Parameter	{{{Parameter}}}}}
Browsersupport	Details: caniuse.com

Beispiel

p.marked {
  background-color: yellow;
  & span {
    color: red;
  }
}

Die äußere Regel selektiert alle p Elemente, die die Klasse marked haben, und gibt ihnen die Hintergrundfarbe gelb. Darin geschachtelt ist eine Regel, die den Selektor p.marked durch das Zeichen & aufgreift und zu p.marked span erweitert. Dieser Selektor gilt nun für die innere Regel, so dass alle span-Elemente innerhalb von p.marked-Elementen die Textfarbe rot bekommen.

Beachten Sie: Die Leerstelle, die im Beispiel zwischen & und span steht, ist ein Nachfahrenselektor.

Siehe auch

• Tutorial-Artikel zum CSS-Schachtelung

Weblinks

• W3C: CSS Nesting Modul