web-dev-qa-db-de.com

letztes Kind der Div-Klasse

Ich beende meine WordPress-Webseite und möchte (mit dem CSS) die Liste der Einträge auf der Posts-Seite gestalten. Wordpress erstellt dies:

<div class="entry">

Es gibt eine Menge dieser Elemente auf der Seite, um sie zu trennen, habe ich den Rand am unteren Rand des Eintrags verwendet. Das Problem ist, dass ich diesen Rand nicht beim letzten Eintrag haben möchte. Kann so etwas im CSS gemacht werden? (Beachten Sie, dass es keine Liste ist, daher kann ich keine Pseudoklassen verwenden.)

Hier ist das CSS, es ist ziemlich einfach:

.entry{  border-bottom: 1px solid yellow; }

HTML:

<div id="wrapper">
  <br />
  there are loads of code
  <br />
  <div class="entry">bunch of code there</div>
  <br />
  <div class="entry">bunch of code there</div>
  <br />
  <div class="entry">bunch of code there</div>
  <br />
  another huge code
  <br />
</div>

Vielen Dank im Voraus für Ihre Hilfe.

8
Tom11

Sie haben bereits angegeben, wonach Sie suchen: last-child: http://reference.sitepoint.com/css/pseudoclass-lastchild

Also benutze .entry:not(:last-child) { border-bottom: 1px solid yellow; }

Beachten Sie, dass es sich nicht um eine Liste handelt, so dass ich keine Pseudoklassen verwenden kann.

JSYK, die Pseudoklasse hängt nicht davon ab, ob das enthaltende Element eine Liste ist. Wenn Sie damit gemeint haben, dass das letzte .entry -Element nicht das letzte untergeordnete Element seines Containers ist, kann es möglicherweise trotzdem ausgewählt werden. Aber ich kann dir nicht sagen, wie, wenn du mir nicht zeigst, wie das eigentliche Markup aussieht.

Wenn Ihrem endgültigen div.entry keine weiteren divs folgen, funktioniert der Selektor .entry:not(:last-of-type) für Sie.

12
tuff
.entry:last-child {
  border-bottom: none;
}

Angenommen, Sie haben eine Liste <li> mit darin enthaltenen Links <a>, und Sie möchten den letzten <a> der <li> erhalten. Benutz einfach:

.entry:last-child a {
  border-bottom: none;
}

Dies wählt den letzten der .entry aus und richtet sich an den/die Link (s)

6
JimmyRare

Ziemlich einfache Lösung:

#wrapper :last-child
{
    border:none;
}
4
Ishwor

Für die umfassendste Browserunterstützung würde ich Folgendes empfehlen:

.entry { border-bottom: 1px solid yellow; }
.entry:last-child { border-bottom: 0; }
0
Kevin Boucher