Nesting, Nesting-Operator — mit oder ohne

[Wo ist das Nest geblieben?]

Keine Frage sondern “FYI“:

Was ich bislang nirgends (also nicht nur „hier“) gelesen, mir dafür aber zusammengereimt habe:

1. Trivialees

• Nesting gibt’s mit und ohne &.

• Ohne & funktioniert es so, als ob ein (dann unsichtbares) &, zusammen mit einem Whitspace, vor den einzelnen Kind-Selektoren geschrieben stünde.

2. „Gereimtes“

Wenn in einem der Kind-Selektoren ein & auftaucht, dann verschwindet/entfällt in diesem Selektor der „virtuelle“ ersatzlos. Es bleiben nur die (es darf ja nicht nur „nur einen geben“) explizit hingeschriebenen!

3. Ausprobiertes

„Man kann auch“:

.topSel {
  /* virtuelles & */ .kindSel1 { }
  & .kindSel2 { } /* 1&2 sind quasi Zwillinge */
  &.kindSel3 { } /* 1+2 sagen: 3 gehört nicht zu uns! */
  .keinKindSel & { /* Regel .topSel… gitl nur, wenn innerh. v. .keinKindSel */ }
  & .rasselbande & {
    .einSel & p & {
      & & { /* ≡ .topSel .rasselbande .topSel .einSel .topSel .rasselbande .topSel p .topSel .rasselbande .topSel .topSel .rasselbande .topSel .einSel .topSel .rasselbande .topSel p .topSel .rasselbande .topSel */
*/
    }
  }
}

So wird das natürlich schnell … ein Anlaß, gewisse Vokabeln zu äußern.

Aber: mit Bedacht eingesetzt, kann aus verwirrenden Style-Sammlungen (und hier jetzt ohne &) fast schon ein Kunstwerk werden. — Nicht selten, wenn man Media-Queries nach „innen“ verlagert. Dann bleibt zusammen, was zusammen gehört:

body {
  display: grid;
  grid-template: …;
  background-color: skyblue;

  @media width < 128ch {
    grid-template: …;
    background-color: ivory;

    @media width < 64ch {
      display: flex;
      background-color: yellow;
      …
    }
  }
}

(Und: mit ch drin ist des dem User bzw. dem Browser dort überlassen, wie die Buchstaben aussehen, wie groß sie sein soll(t)en …)

---

Ach ja: „MDN sagt“, daß & auch ‚außerhalb der <del>Klassen</del>Style-Regeln eine klare Bedeutung hat: es gibt mehrere Wege „nach Dokument“. :root, &, :scope … noch jemand?