Margin für ul:last-child setzen
Jan
- css
0 dave0 Jan
0 Matthias Apsel0 ChrisB0 kubitsch
Hallo,
ich habe ein "hartnäckiges" Verständnisproblem mit dem Pseudoklassen-Selektor ':last-child'.
Im nachfolgenden Script befinden sich zwei unsortierte Listen. Auf die beiden Listen folgt ein <p>Absatz</p>, der einen definierten Abstand zur jeweils letzten Liste im Dokument halten soll:
-------------------------------------
-------------------------------------
<html>
<head>
<title></title>
<style type="text/css">
<!--
*
{
padding:0px;
margin:0px;
}
ul:last-child
{
margin-bottom:0px;
}
-->
</style>
</head>
<body>
<div> <!-- Wrappendes DIV notwendig ? Wenn ja: Warum ? -->
<ul>
<li>Listeneintrag 01</li>
<li>Listeneintrag 02</li>
<li>Listeneintrag 03</li>
</ul>
<ul>
<li>Listeneintrag 01</li>
<li>Listeneintrag 02</li>
<li>Listeneintrag 03</li>
</ul>
</div> <!-- Wrappendes DIV notwendig ? Wenn ja: Warum ? -->
<p>Absatz</p>
</body>
</html>
-------------------------------------
-------------------------------------
Dazu selektiere ich über 'ul:last-child' das letzte Element vom Typ 'ul' und weise diesem per 'margin-bottom' einen Aussenabstand nach unten zu.
Leider wird diese Anweisung erst umgesetzt, wenn ich die Listen mit einem "wrappenden" <div> umschließe - verstehen tue ich das allerdings nicht.
Frage: Ohne den <div>-Container selektiere ich mit 'ul:last-child' doch das letzte <ul>-Element innerhalb des übergeordneten "wrappenden" (Eltern-)Elementes <body> - oder etwa nicht ?
Für jeden Hinweis dankbar ...
Mfg Jan
Hi,
Dazu selektiere ich über 'ul:last-child' das letzte Element vom Typ 'ul'
Da liegt der Denkfehler.
Du selektierst alle ul-Elemente die keine Nachfolgende Nodes mehr haben.
Was du eigentlich möchtest ist :last-of-type
~dave
Uh, Leute, ich danke Euch ... habs begriffen !
Om nah hoo pez nyeetz, Jan!
Frage: Ohne den <div>-Container selektiere ich mit 'ul:last-child' doch das letzte <ul>-Element innerhalb des übergeordneten "wrappenden" (Eltern-)Elementes <body> - oder etwa nicht ?
nicht zwangsläufig. Um ganz sicher zu gehen, verwende last-of-type
Für jeden Hinweis dankbar ...
zusammenfallende Außenabstände
Matthias
Hi,
Frage: Ohne den <div>-Container selektiere ich mit 'ul:last-child' doch das letzte <ul>-Element innerhalb des übergeordneten "wrappenden" (Eltern-)Elementes <body> - oder etwa nicht ?
Nein - weil es nicht das letzte Kind von Body ist, schließlich kommt noch ein P danach.
MfG ChrisB
nach dem das mit dem :last-child geklärt ist nur ein Hinweis:
Vielleicht wäre mit ul + p und einem margin-top auch eine entsprechende Formatierung möglich.