Nesting, Nesting-Operator — mit oder ohne

[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