• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Listenelemente ansprechen

H

Hannes Tunk

Neues Mitglied
Guten Morgen,
ich habe folgendes CSS Problem, ich möchte bei einer Liste (DL), dass letzte Element(DD) ansprechen.

<dl>
<dt></dt>
<dd></dd>
<dd></dd>
<dd></dd>
<dt></dt>
<dd></dd>
<dd></dd>
</dl>
Ich möchte danach einen Abstand setzen, um auf den neuen Wert hervorzuheben. DT geht ned, weil ich sonst das oben ja auch habe.
Wäre es jetzt einfacher das erste DT mit ner ID zu versehen und den Margin auf 0 zu setzten oder gibt es eine Möglichkeit auf das jeweils letzte Element zu verweisen?

Mfg und einen schönen Ostersonntag,
Hannes
 
Hey,
danke für die fixe Antwort, hat bei mir leider nicht geklappt.

dl dd :last-of-type{
margin-bottom: 50px;
}

PS: Ohne ":last-of-type" konnte ich alle dd's ansprechen wie geplant, wird also schon angewendet.
Komischerweise wird es, wenn ich es schreibe wie oben, aber auch im Quellcode des Browsers bei dd gar nicht mehr angezeigt.

Andere Ideen?

Mfg
 
Versuche es besser mit Klassen
Code: 
<style>
  dl dd.fett{
margin-bottom: 50px;
    background:green;
}
</style>
<dl>
<dt>1</dt>
<dd>2</dd>
<dd>3</dd>
<dd class="fett">4</dd>
<dt>5</dt>
<dd>6</dd>
<dd class="fett">7</dd>
</dl>
Die beiden Elemente, die du Fett dargestellt hast, kannst du so nicht ansprechen, außer wenn sie immer an der gleichen stellen wären
Code: 
<style>
  dl dd:nth-child(4),
    dl dd:nth-child(6)
  {
margin-bottom: 50px;
    background:green;
}
</style>
<dl>
<dt>1</dt>
<dd>2</dd>
<dd>3</dd>
<dd>4</dd>
<dt>5</dt>
<dd>6</dd>
<dd>7</dd>
</dl>


[(code]
 
Ich habe es so verstanden, dass die Liste länger werden kann, wobei die Anzahl der dd-Elemente zu jedem dt-Element variieren kann.

Dann sehe ich zwei Lösungsansätze:

1. Über jedem dt-Element außer dem ersten wird ein Abstand eingefügt:

Code: 
dt:nth-of-type(1n+2) {
   margin: 1rem 0rem 0rem 0rem;
}

Statt rem kannst du natürlich auch andere Einheiten verwenden.

2. Wie seit HTML5 erlaubt werden die einzelnen Datensätze in div-Elemente eingefügt und dann ein Abstand zwischen die div-Elemente eingefügt:

Code: 
<dl>
   <div>
      <dt>dt 01</dt>
      <dd>dd 02</dd>
      <dd>dd 03</dd>
      <dd>dd 04</dd>
   </div>
   <div>
      <dt>dt 05</dt>
      <dd>dd 06</dd>
      <dd>dd 07</dd>
   </div>
   <div>
      <dt>dt 08</dt>
      <dd>dd 09</dd>
      <dd>dd 10</dd>
   </div>
   <div>
      <dt>dt 11</dt>
      <dd>dd 12</dd>
      <dd>dd 13</dd>
      <dd>dd 14</dd>
   </div>
</dl>

So hast du mehr Möglichkeiten die Datensätze anzuordnen.
 
wie wärs damit:

HTML: 
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TEST</title>
<style>
dt                     { margin-top:1em;background-color:green;}
dt:first-of-type     { margin-top:0em;background-color:green;}
</style>
</head>
<body>
<dl>
  <dt>Coffee</dt>
      <dd>Black hot drink</dd>
    <dd>Black hot drink</dd>
  <dt>Milk</dt>
      <dd>White cold drink</dd>
      <dd>White cold drink</dd>
  <dt>Cream</dt>
      <dd>White toping</dd>
      <dd>White toping</dd>
</dl>
</body>
</html>
2022-04-18_00h22_11.png
 
Hey Leute,
vielen Dank für die Hilfe und die investierte Zeit. Mega toll !!!

Hab jetzt mit eurer Hilfe ein Paar Lösungswege gefunden, welche auch funktionieren.

Mfg und eine schöne Woche euch,
Hannes
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben