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?

[Gunnar Bittersmann]

@@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.

Keine Ahnung, welche Quellen du da herangezogen hast. Mit „nirgends“ kannst du nicht MDN meinen.

Verwendung von CSS-Nesting: „Sie können CSS-Nesting verwenden, um Kindselektoren eines Elternteils zu erstellen, die wiederum dazu verwendet werden können, Kindelemente spezifischer Elternziele anzusprechen. Dies kann mit oder ohne den & Nesting-Selector erfolgen.“

Nicht selten, wenn man Media-Queries nach „innen“ verlagert. Dann bleibt zusammen, was zusammen gehört:

Ja, aber …

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

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

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

… da fehlen Klammern.

Und es macht keinen Sinn, die MQs zu schachteln. Was kleiner ist als 64ch, ist immer auch kleiner als 128ch.

es gibt mehrere Wege „nach Dokument“. :root, &, :scope … noch jemand?

html (oder wie immer das Wurzelelement der betreffenden Mark-up-Sprache heißt)

🖖 Live long and prosper

[Wo ist das Nest geblieben?]

Ich hab’ jetzt da nochmal nachgesehen — und keinen Hinweis auf die quasi rekursive Nutzung entdeckt.

sel1 {
  sel2 & { /* ::= sel1 sel2 */
    & & { /* ::= sel1 sel2 sel1 sel2; ::≠ sel1 sel2 sel2 */
      & > & { /* ::= sel1 sel2 sel1 sel2 > sel1 sel2 sel1 sel2 */
      }
    }
  }
}

Und das Schachteln der Queries? Ich finde es nett, wenn ich zwecks der Übersicht nicht Dutzende davon „wegfolden“ muß.

Natürlich „kommt man drauf“. Aber erwähnenswert wäre es vielleicht ja.

Und: so fallen manche Fehler möglicherweise/wahrscheinlich (und dann sogar deutlich) früher auf. Es ist, beispielsweise, damit schwierig(er)

@media width > 1000px { … }
@media width < 1000px { … }

oder (vmtl. meist) komplexere „Logiklöcher“ zu bauen. Verschachtelt, meine ich, sind das dann keine kleinen Mäuschen mehr, erreichen womöglich sogar Elefanten-Größe.

Aber vor allem muß man so (ob nun mit „einfacher“ oder „rekursiver“ Schachtelung) nicht wer weiß wo in den ganzen Styles (in wie vielen Quellen?) suchen. Man hat, mit einem einfachen Einfalten (und wenn man … hmmm… „brav“ arbeitet) eine Stelle mit wenigen Zeilen für das Basis-Layout vor der Nase. Und weiß, wo man sich reingraben kann, wenn daraus mehr wird …