CSS - Bedingter Abstand unten je nach letztem Element möglich?

[Stoschka]

Hallo zusammen

Ich suche nach einer eleganten CSS-Lösung für folgende Layoutvorgabe:

Handelt es sich beim letzten Element eines Artikels im Main um einen Text, so sollte ein Innenabstand von X folgen.
Handelt es sich hingegen um ein img oder etwas Bildartiges, so sollte es randabfallend unten platziert sein (also ohne Innenabstand).

Normalerweise würde ich unabhängig vom Inhalt ein Padding von X festlegen und das mögliche Bild als Hintergrundbild einbauen und unten anschlagen. Da das Bild aber bei einigen Seiten ein Slider ist, fällt die Option Hintergrundbild meines Wissens weg, und ich muss mit normalen Bildern arbeiten, die ein mögliches Padding unten natürlich berücksichtigen würden.

Dreckig wäre, padding-bottom: 0 zu setzen und im Falle eines Textes am Ende einfach ein paar Absätze reinzuhauen (kann ich dem Kunden nicht zumuten).

Umständlich wäre, im CMS zwei Klassen von Artikeln zu definieren, «randabfallend» und «nicht randabfallend», und der Kunde muss dann immer manuell eingeben, was gefragt ist.

Kurzum: Ich würde gerne im CSS folgende Bedingung definieren: Wenn letztes Element im Artikel gleich Text, dann Padding-bottom, sonst nicht. Oder umgekehrt formuliert: Wenn letzter Text auch letztes Element des Artikels, dann Padding-bottom.

Ich habe etwas mit :last-child und :last-of-type rumexperimentiert, aber keine Lösung gefunden, die das Padding nur anhängt, wenn der Text wirklich am Ende des Artikels steht.

Hat jemand eine elegante CSS-Idee? Oder muss ich was scripten?

Danke vielmals!
Stoschka

[fusch]

Hallo Stoschka,

meines Erachtens nach sollte es schon mit purem CSS möglich sein.

Vielleicht hilft Dir das weiter?
https://codepen.io/hellschu/pen/NLWPJG/

Gruß
Hella

[Stoschka]

Liebe Hella

Danke vielmals für deine ausgesprochen hilfreiche Testoberfläche. Sie hat mir letztlich sehr geholfen.

Zum einen hat sie mir bestätigt, dass ich nicht völlig auf dem Holzweg war, zum andern hat sie mich auf die Idee gebracht, endlich mal im Quellcode nachzusehen, was Contao als class konkret ausgibt. Dabei habe ich festgestellt, dass das «last-child» in der Klassenbezeichnung quasi schon eingebaut war (class="ce_text last block").

Mit diesen Selektoren hat's geklappt:

#main div[class="ce_text last block"], #main div[class="ce_text first last block"]

Leider konnte ich auf die Schnelle nirgends Infos über den «Baukasten» finden, nach dem Contao die Klassenbezeichnungen konkret baut
Wäre noch hilfreich, um alle Varianten zu antizipieren...

However - es klappt! Danke vielmals
Stoschka

[tblumrich]

Müsste doch auch einfach so gehen:

#main .ce_text.last {}

Vergibt die gewünschte Eigenschaft nur dem Textelement mit der Klasse .last
Contao gibt (soweit ich weiß) immer dem letzten Element eines Artikels die Klasse .last
Und nur wenn .ce_text und .last zusammen sind, greift dein padding (oder was immer).

Gruß Thomas


Gesendet von iPad mit Tapatalk