nicht angemeldet
Sampo
Sampo
Rolf b
Der Martin
Rolf b
Sampo
Der Martin
Sampo
dedlfix
Sampo
Hallo.
Ich suche nach einem css-Selektor für Grafiken, die sich vor bestimmten Absätzen befinden. In HTML steht beispielsweise
<img src="graphic.png"><p class="GraphicLabel">some text</p>
Sinn der Sache ist hier, solche Grafiken zu zentrieren. Den Absatz nach einer Grafik selektieren ginge so (wenn man p.GraphicLabel nicht nutzen kann):
img + p { text-align:center; }
Aber anders herum?
Hallo Sampo,
Ich suche nach einem css-Selektor für Grafiken, die sich vor bestimmten Absätzen befinden.
Kurz und knapp: es gibt keinen Selektor für das vorhergehende Element. Das ist ein technisches Problem, deshalb gibt es das bisher nicht.
LG,
CK
Hallo CK.
Ich hab's befürchtet. Aber vielleicht komme ich auf andere Weise weiter: Hilfreich wäre alternativ ein Selektor für Grafiken, die sich nicht in einem <p>-Element befinden.
Nötig wäre also das Gegenteil von
p > img
Aber ganz so einfach ist es offenbar doch nicht, denn der folgende Selektor klappt bei mir nicht.
:not(p > img)
Hallo Sampo,
">" ist ein Kombinator, und innerhalb von :not sind nur einfache Selektoren erlaubt (siehe hier). Deswegen geht das nicht.
Das Problem bei CSS ist, dass man nur "vorwärts" selektieren kann. Wenn ich mich richtig erinnere, wurde ein Blick zurück oder zum Elternelement von den entsprechenden Gremien aus Performancegründen abgelehnt.
Grafiken, die nicht in einem p sind, könnte durch :not(p) img bzw. :not(p) > img erreicht werden. Habe ich jetzt allerdings nicht ausprobiert.
Wenn das nicht zielführend ist: Ich bin ja ein pragmatischer Mensch; ich würde das Image und den Paragraphen in ein div einhüllen, dann kannst Du vorwärts selektieren.
Gruß Rolf
Hallo,
Das Problem bei CSS ist, dass man nur "vorwärts" selektieren kann. Wenn ich mich richtig erinnere, wurde ein Blick zurück oder zum Elternelement von den entsprechenden Gremien aus Performancegründen abgelehnt.
so habe ich das auch mal gelesen.
Grafiken, die nicht in einem p sind, könnte durch
:not(p) imgbzw.:not(p) > imgerreicht werden. Habe ich jetzt allerdings nicht ausprobiert.
Ersteres eher nicht; das würde alle Grafiken selektieren, die irgendein Vorfahrenelement haben, das kein p ist. Also alle, denn jede Grafik im Dokument hat mindestens body und html als Vorfahren. Das andere müsste gehen; ist die Grafik aber innerhalb des p-Elements noch eine Ebene tiefer verschachtelt (etwa in einem Link), dann greift dieser Selektor auch wieder ins Leere.
Wenn das nicht zielführend ist: Ich bin ja ein pragmatischer Mensch; ich würde das Image und den Paragraphen in ein div einhüllen, dann kannst Du vorwärts selektieren.
Ehrlich? Grafiken, die Kindelemente eines div sind, das kein p als Kind enthält? Krieg ich in CSS nicht gebacken.
So long,
Martin
Ehrlich? Grafiken, die Kindelemente eines div sind, das kein p als Kind enthält? Krieg ich in CSS nicht gebacken.
Nein - ich würde hier geistige Mitarbeit des HTML Autors (bzw. desjenigen, der das HTML generiert) erwarten und das HTML so aufbauen, dass das DIV nur für die erforderlichen Fälle eingesetzt wird. Alternativ: Das DIV immer einsetzen und je nach Situation eine passende CSS Klasse zuordnen. Ist natürlich alles andere als elegant, und vermutlich bekomme ich jetzt einen Shitstorm zum Thema "Wie baut man Webseiten richtig". Die Shitwerfer würde ich dann aber gleich bitten, eine "gute" Lösung mitzuliefern.
Gruß Rolf
Hallo Rolf.
">" ist ein Kombinator, und innerhalb von :not sind nur einfache Selektoren erlaubt (siehe hier). Deswegen geht das nicht.
Schade, aber nachvollziehbar.
Grafiken, die nicht in einem p sind, könnte durch
:not(p) imgbzw.:not(p) > imgerreicht werden. Habe ich jetzt allerdings nicht ausprobiert.
Gute Idee, beide Selektoren wirken. Doch es werden alle Grafiken selektiert, auch solche, die in einem p sind. Bei :not(p) > img nachvollziehbar, weil img nicht immer direktes Kind von p ist. Doch warum :not(p) img versagt, verstehe ich nicht.
Ich habe mir jetzt anders beholfen: Zunächst werden alle img zentriert, als Ausnahme werden img in p wieder "normal" inline gesetzt.
img {display: block; margin-left: auto; margin-right: auto; }
p img { display: inline; margin-left: 0; margin-right: 0; }
Danke, die Kommentare haben mich auf den Weg gebracht.
Hallo
Wie willst du Lösungen von uns erwarten wenn du das Problem erst mit deiner eigenen Lösung mitteilst?
Gruss
MrMurphy
Hallo,
Gute Idee, beide Selektoren wirken. Doch es werden alle Grafiken selektiert, auch solche, die in einem p sind. Bei
:not(p) > imgnachvollziehbar, weil img nicht immer direktes Kind von p ist. Doch warum:not(p) imgversagt, verstehe ich nicht.
warum das so ist, habe ich eben erklärt.
Ich habe mir jetzt anders beholfen: Zunächst werden alle img zentriert, als Ausnahme werden img in p wieder "normal" inline gesetzt.
img {display: block; margin-left: auto; margin-right: auto; } p img { display: inline; margin-left: 0; margin-right: 0; }
Kann man machen. Das wird halt unübersichtlich, wenn man mehrere Eigenschaften zunächst "global" zuweist und dann lokal wieder aufhebt bzw. überschreibt.
So long,
Martin
Doch warum
:not(p) imgversagt, verstehe ich nicht. warum das so ist, habe ich eben erklärt.
Danke, habe ich verstanden.
Ich habe mir jetzt anders beholfen: Zunächst werden alle img zentriert, als Ausnahme werden img in p wieder "normal" inline gesetzt. Kann man machen. Das wird halt unübersichtlich, wenn man mehrere Eigenschaften zunächst "global" zuweist und dann lokal wieder aufhebt bzw. überschreibt.
Stimmt. Die sauberere Lösung ist, den HTML-Text zu ändern, damit dann einfacheres css möglich wird. Mal sehen, wann ich das umsetzen kann.
Gruß, Sampo
Tach!
:not(p > img)
Abgesehen davon, dass der wohl nicht geht, wie gesagt wurde, würde der auch nicht zielführend sein, denn es gibt eine ganze Menge Zeugs, das kein img als Kind von p ist.
Und wenn ich so bei caniuse.com schaue, sehe ich bei not() ziemlich viel rot.
Mir würde jetzt noch :has() einfallen, aber das ist noch weniger grün.
dedlfix.
Hallo
ob eine Lösung mit HTML und CSS möglich ist hängt davon ab, in wie weit der Quelltext angepasst werden kann. Es ist frustrierend Lösungen zu suchen und anschließend zu erfahren, dass der Quelltext fest vorgegeben ist.
Zudem wäre ein Link zu einer Beispielseite sinnvoll.
Wenn der zentrierte Absatz direkte Angaben zu dem Bild enthält ist eventuell auch ein figure-Element mit einem figcaption-Element sinnvoll.
Gruss
MrMurphy
Hallo McMurphy.
ob eine Lösung mit HTML und CSS möglich ist hängt davon ab, in wie weit der Quelltext angepasst werden kann. Es ist frustrierend Lösungen zu suchen und anschließend zu erfahren, dass der Quelltext fest vorgegeben ist.
Freilich, wenn ich den Quelltext verändern kann, dann bekommen die gewünschten Grafiken eine Klasse, und der css-Selektor ist gleich fertig. Oder das Bild wird in ein figure-ELement gelegt.
Da der Aufwand für das Ändern des Quelltexts erheblich ist, suche ich lieber noch weiter nach einem Selektor, siehe auch meine Antwort auf CK.
Gruß, Sampo