Wie dem letztem Element einen anderen Wert geben

[Tobias Kl.]

Hallo!

Ich würde gerne mit CSS allen Abschnitten <p>foo</p> mit Ausnahme des letzten magin-bottom:10px; zuweisen. Nach dem letzten Abschnitt sollen es magin-bottom:20px sein.

Beispiel:

<h1>foo</h1>
<p>foo</p> <!-- 10px Abstand nach unten -->
<p>foo</p> <!-- 10px Abstand nach unten -->
<p>foo</p> <!-- 10px Abstand nach unten -->
<p>foo</p> <!-- 10px Abstand nach unten -->
<p>foo</p> <!-- 20px Abstand nach unten -->
<img src="#" alt="Alt" />

Meine beiden Versuche mit Selektoren funktioneren leider nicht:

p {margin:0 0 10px 0;}
p:last-of-type {margin:0 0 20px 0;}

sowie

p {margin:0 0 20px 0;}
p+p {margin:0 0 10px 0;}

Wie kann ich nur dem letzten Element einen bestimmten Wert zuweisen?

Danke und viele Grüße
Tobias

[apsel]

Om nah hoo pez nyeetz, Tobias Kl.!

das einfachste wäre wohl dem letzten Element eine eigene Klasse zu geben. <p class="letztes">bar</p> und darauf zu hoffen, dass es irgendwann :last-child gibt.

Matthias

[suit]

das einfachste wäre wohl dem letzten Element eine eigene Klasse zu geben. <p class="letztes">bar</p> und darauf zu hoffen, dass es irgendwann :last-child gibt.

:last-child gibt es doch bereits, würde in diesem Fall aber nicht funktionieren. Es gibt aber ohnehin :last-of-type - wie von OP genannt - das wird aber von alten Browsern noch nicht unterstützt.

Dem letzten p-Element die Klasse "last-of-type" zuweisen erscheint mir hier am zielführensten

p.last-of-type lässt sich später einfach gegen p:last-of-type austauschen und man weiß sofort, was gemeint ist/war.

[Gunnar Bittersmann]

@@suit:

nuqneH

Dem letzten p-Element die Klasse "last-of-type" zuweisen erscheint mir hier am zielführensten

Solche Klassen sind in 100% aller Fälle unschön und in 99% aller Fälle unnötig.

Qapla'

[Gunnar Bittersmann]

@@Tobias Kl.:

nuqneH

Wie kann ich nur dem letzten Element einen bestimmten Wert zuweisen?

Warum? Warum nicht 'img { margin-top: 20px }'?

Qapla'

[EKKi]

Mahlzeit Gunnar Bittersmann,

Wie kann ich nur dem letzten Element einen bestimmten Wert zuweisen?

Warum? Warum nicht 'img { margin-top: 20px }'?

Bzw. eher img { margin-top: 10px } - da das letzte <p> ja ebensowie die anderen bereits einen unteren Abstand von 10px besitzt ... :-)

MfG,
EKKi

[Gunnar Bittersmann]

@@EKKi:

nuqneH

Bzw. eher img { margin-top: 10px }

Nein.

da das letzte <p> ja ebensowie die anderen bereits einen unteren Abstand von 10px besitzt ... :-)

Von zusammenfallenden Rändern [CSS2 §8.3.1] hast du noch nicht gehört?

Qapla'

[EKKi]

Mahlzeit Gunnar Bittersmann,

Von zusammenfallenden Rändern [CSS2 §8.3.1] hast du noch nicht gehört?

Noch nicht in der Deutlichkeit ... :-)

MfG,
EKKi

[Gunnar Bittersmann]

@@EKKi:

nuqneH

Von zusammenfallenden Rändern [CSS2 §8.3.1] hast du noch nicht gehört?

Noch nicht in der Deutlichkeit ... :-)

Hm ...

Qapla'