CSS: Elemet nur dann selektieren, wenn es nicht in Child eines bestimmten Parents ist?

[Sven]

Hallo,

ich habe meine Grafiken auf SVG Vectoren umgestellt.

Hierbei verwende ich für alle SVGs folgende Grundregel

svg {
	width: 1em;
	height: 1em;
	transition: transform 0.1s;
}

Nun habe ich aber einige Statistiken, deren Anzeigen auch mittels SVG dargestellt werden (was ich längst vergessen hatte) und diese sind nun folgerichtig so klein, dass sie nicht mehr sichtbar sind.

Daher würde ich diese SVGs gerne von der Grundregel ausnehmen, aber alle Versuche, dies mittels not: zu machen, schlugen fehl.

Was diesen SVGs allen gleich ist, ist, dass sie in einem DIV der Klasse c3 liegen.

Wie muss ich dann die Grundformel notieren, sodass SVG-Elemente, die irgendwo innerhalb eines c3-DIVs liegen, von der Grundformel ausgenommen sind?

Sven

[Sven]

Wie muss ich dann die Grundformel notieren, sodass SVG-Elemente, die irgendwo innerhalb eines c3-DIVs liegen, von der Grundformel ausgenommen sind?

Nun hats doch funktioniert, ich muss vorhin einen Fehler drin gehabt haben:

svg:not(.c3 svg) {
	width: 1em;
	height: 1em;
	transition: transform 0.1s;
}

Sven

[Rolf B]

Hallo Sven,

svg:not(.c3 svg)

😲

Ich hätte jetzt nicht gedacht, dass das geht. Irgendwie hatte ich mir in den Kopf gesetzt, dass der Selektor im :not() relativ zu dem Element sein muss, hinter dem er steht. Was offensichtlich Blödsinn war…

Was definitiv falsch ist, ist der oft gesehene und naive Ansatz :not(.c3) svg.

Rolf

[Sven]

Hallo Rolf,

ich hätte jetzt nicht gedacht, dass das geht. Irgendwie hatte ich mir in den Kopf gesetzt, dass der Selektor im :not() relativ zu dem Element sein muss, hinter dem er steht. Was offensichtlich Blödsinn war…

Ältere FF-Versionen (so um die 80 herum) spielen hier auch nicht mit. Da hat sich definitiv im Browserverhalten etwas geändert.

Sven

[Gunnar Bittersmann]

@@Sven

Hierbei verwende ich für alle SVGs folgende Grundregel

svg {
	width: 1em;
	height: 1em;
	transition: transform 0.1s;
}

Nun habe ich aber einige Statistiken, deren Anzeigen auch mittels SVG dargestellt werden (was ich längst vergessen hatte) und diese sind nun folgerichtig so klein, dass sie nicht mehr sichtbar sind.

Daher würde ich diese SVGs gerne von der Grundregel ausnehmen, aber alle Versuche, dies mittels not: zu machen, schlugen fehl.

Sinnvoller scheint mir zu sein, nur diejenigen SVGs klein zu machen, die klein sein sollen. Lassen die sich irgendwie selektieren, bspw. weil es Icons sind, die ausschließlich in Buttons vorkommen? Dann

button svg {
	width: 1em;
	height: 1em;
	transition: transform 0.1s;
}

Oder kannst du den Icons (nehm ich an) eine Klasse verpassen?

---

Was diesen SVGs allen gleich ist, ist, dass sie in einem DIV der Klasse c3 liegen.

Wie muss ich dann die Grundformel notieren, sodass SVG-Elemente, die irgendwo innerhalb eines c3-DIVs liegen, von der Grundformel ausgenommen sind?

Das wird wohl nichts. Du müsstest deine „Grundregel“ für diese SVGs wieder überschreiben. So in der Art:

.c3 svg {
  width: inherit;
  height: inherit;
  transition: none;
}

🖖 Живіть довго і процвітайте

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Das wird wohl nichts. Du müsstest deine „Grundregel“ für diese SVGs wieder überschreiben.

I stand corrected. 🤨

🖖 Живіть довго і процвітайте