CSS-Frage, gemeinsamer Code

[MudGuard]

Hi,

mit sowas

#a, #b {
  p { color: red; }
  ul { margin: 0; }
}

kann ich ja Elemente, die sich innerhalb von den Elementen des äußeren Selektors befinden, formatieren.

Aber kann ich auch die Elemente des äußeren Selektors dort auch formatieren?

Wenn ja, wie?

Sprich: was muß ich anstelle der drei Fragezeichen schreiben, um die Elemente mit der ID "a" und "b" gelb zu färben?

#a, #b {
  ??? { background: yellow; }
  p { color: red; }
  ul { margin: 0; }
}

Das hier

#a, #b { background: yellow; }

#a, #b {
  p { color: red; }
  ul { margin: 0; }
}

würde bewirken, was ich will, aber ich fände es schöner, wenn ich das alles an einer Stelle, also innerhalb des #a, #b {} hätte.

cu,
Andreas a/k/a MudGuard

[JürgenB]

Hallo Andreas,

#a, #b {
  ??? { background: yellow; }
  p { color: red; }
  ul { margin: 0; }
}

versuch mal

#a, #b {
  & { background: yellow; }
  p { color: red; }
  ul { margin: 0; }
}   

Gruß
Jürgen

[Gunnar Bittersmann]

@@JürgenB

#a, #b {
  & { background: yellow; }
  p { color: red; }
  ul { margin: 0; }
}   

sollte gehen. Ich würde das aber so schreiben:

#a, #b {
  background: yellow;

  p { color: red; }
  ul { margin: 0; }
}   

🖖 Live long and prosper

[MudGuard]

Hi,

@@JürgenB

#a, #b {
  & { background: yellow; }
  p { color: red; }
  ul { margin: 0; }
}   

sollte gehen. Ich würde das aber so schreiben:

#a, #b {
  background: yellow;

  p { color: red; }
  ul { margin: 0; }
}   

Danke an Euch beide, beide Schreibweisen führen zum gewünschten Ergebnis. Bei nur einer gesetzten Eigenschaft ist die Variante ohne & {} aus meiner Sicht schöner, aber bei mehreren find ich die geklammerte Version dann doch besser.

Hat der &-Selektor (ist das ein Selektor?) noch einen speziellen Namen (so wie > der Kind-Selektor ist ...)?

cu,
Andreas a/k/a MudGuard

[Matthias Scharwies]

Servus!

Hat der &-Selektor (ist das ein Selektor?) noch einen speziellen Namen (so wie > der Kind-Selektor ist ...)?

Nesting-Selector oder „Verschachteluungs-Selektor“

Herzliche Grüße
Matthias Scharwies

[MudGuard]

Hi,

Hat der &-Selektor (ist das ein Selektor?) noch einen speziellen Namen (so wie > der Kind-Selektor ist ...)?

Nesting-Selector oder „Verschachteluungs-Selektor“

Auch Dir ein Dankeschön - mit Nesting sucht's sich besser als mit & …

Dann kann ich mir Material zum Nachlesen finden lassen …

cu,
Andreas a/k/a MudGuard

[Rolf B]

Hallo MudGuard,

Brainstorming von Jürgen und mir 2023 in Mainz ergab:

Advent, Advent, das Wiki brennt...

Rolf

[Gunnar Bittersmann]

@@Matthias Scharwies

Nesting-Selector

Stand heute ist der nicht in [CSS-SELECTORS] zu finden; aber in [CSS-NESTING §4].

oder „Verschachteluungs-Selektor“

[MDN] spricht auch im Deutschen von „Nesting-Selektor“.

🖖 Live long and prosper

[MudGuard]

Hi,

[MDN] spricht auch im Deutschen von „Nesting-Selektor“.

ich bin eh kein Freund der Eindeutschung von IT-Fachbegriffen (a la Stapelspur statt Stacktrace usw.).

cu,
Andreas a/k/a MudGuard

[Rolf B]

Hallo Gunnar,

das stört mich im Wiki arg - da ist alles ein Selektor. Auch wenn es ein Kombinator ist.

& als Selektor zu bezeichnen ist nicht falsch, es ist aber eher eine Art Makro, das den Elternselektor vertritt. Find ich. Dass man es oft weglassen kann, ist ein Bequemlichkeitsfeature vom CSS Parser.

Die Begriffsfindung der deutschen MDN-Fassung sollte man nicht auf die Goldwaage legen. Die ist nicht von Menschen erstellt, sondern eine maschinelle Übersetzung. D.h. da wird „nesting selector“ stumpf übernommen.

Rolf

[Gunnar Bittersmann]

@@Rolf B

Die Begriffsfindung der deutschen MDN-Fassung sollte man nicht auf die Goldwaage legen. Die ist nicht von Menschen erstellt, sondern eine maschinelle Übersetzung. D.h. da wird „nesting selector“ stumpf übernommen.

Nö. Selector wird als Selektor übersetzt. Und von einer rein maschinellen Übersetzung würde ich erwarten, dass sie auch nesting übersetzt.

Ich denke, da hat ein Mensch Hand angelegt und gesagt: ‚Das nesting lass mal so.‘

🖖 Live long and prosper

[Gunnar Bittersmann]

@@MudGuard

#a, #b {
  background: yellow;

  p { color: red; }
  ul { margin: 0; }
}   

Das war jetzt nur Beispielcode? Beim richtigen steht da noch mehr? Oder andere Farben?

Danke an Euch beide, beide Schreibweisen führen zum gewünschten Ergebnis.

Von wem gewünscht? Von Nutzern nicht. Rot auf Gelb hat bei normaler Schriftgröße nicht genügend Farbkontrast (3.72:1). Die WCAG verlangen min. 4.5:1.

🖖 Live long and prosper

[MudGuard]

Hi,

@@MudGuard

#a, #b {
  background: yellow;

  p { color: red; }
  ul { margin: 0; }
}   

Das war jetzt nur Beispielcode?

ja, ging ja nur um die Syntax von diesem Nesting-Dingens.

cu,
Andreas a/k/a MudGuard