last-child des div-Klasse

Beende ich einige WordPress-Seite und ich wollen Stil (mit CSS) die Rolle der Einträge in der Posts Seite. WordPress erstellt diese: 

<div class="entry">

Gibt es jede Menge dieser Elemente in der Seite, um Sie zu trennen, die ich verwendet, die Grenze an der Unterseite des Eintrags. Das problem ist, dass ich nicht wollen, dass diese Grenze auf den letzten Eintrag. Kann alles sein wie man das in CSS? (Beachten Sie, dass es keine Liste, also kann ich nicht verwenden, pseudo-Klassen)

Hier mein 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>

Dank im Voraus für Eure Hilfe.

  • Warum können Sie nicht verwenden, pseudo-Klassen?
  • Es wäre toll, wenn Sie yould zeigen einen Teil der HTML-Struktur und wie die <div class="entry"></div>-Elemente platziert werden.
InformationsquelleAutor Tom11 | 2012-10-18
  1. 13

    Hast du schon benannt, was Sie suchen: last-child: http://reference.sitepoint.com/css/pseudoclass-lastchild

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

    Beachten Sie, dass Ihr nicht eine Liste, so dass ich nicht verwenden können pseudo-Klassen)

    JSYK, die pseudoclass hängt nicht von der aufnehmenden element eine Liste. Wenn Sie bedeutete, dass die endgültige .entry element ist eigentlich nicht das Letzte untergeordnete Element des Containers, kann es immer noch möglich, um es auszuwählen. Aber ich kann dir nicht sagen wie, es sei denn, Sie zeigen mir, was der eigentliche markup aussieht.

    Wenn Ihre Letzte div.entry ist nicht gefolgt von einer weiteren divs, dann wird der Selektor .entry:not(:last-of-type) wird für Sie arbeiten.

    • Ich glaube, da der OP gesagt, das funktioniert nicht. Es scheint, dass die Einträge nicht aufgeführt sind, nach einander in einem container.
    • Ich dachte, dass er nicht bedeutet, dass die Liste per se, sondern eine Auflistung von <div>s in einem einzelnen container, wo :last-child funktionieren würde. Aber vielleicht habe ich es falsch. 🙂
    • Es ist derzeit nicht möglich, wählen Sie das Letzte element einer bestimmten Klasse, die mit nur einem CSS-Selektor, ohne Annahmen über das markup. stackoverflow.com/questions/10230416/...
    • Nein, aber wenn es last-of-type, oder wenn es gibt es einige andere, insbesondere die Peripherie, was uns ermöglicht, den Gegner, es könnte noch ausgewählt werden. Hängt von der markup!
    • Aber auch last-of-type bedeutet das Letzte Kind seiner Eltern, die dieses element. Aber du hast Recht. Es ist alles über das markup.
    • Nein, leider nicht funktioniert.. ja, Sie sind nicht aufgelistet in einem beliebigen container.
    • "Sie sind nicht aufgelistet in einem beliebigen container" ist zu vieldeutig, um nützlich zu sein. Können Sie bitte das markup?
    • Wenn Sie loszuwerden, die BR - tags wird ein .entry div das Letzte Kind seiner container?
    • Ja, die letzten .entry ist wirklich das Letzte Kind der wrapper.
    • Dann können Sie .entry:not(:last-of-type).
    • Naja, bis klar, es ist ein weiterer code, nach dem letzten .entry , so dass diese Methode nicht funktioniert..

    InformationsquelleAutor tuff
  2. 6
    .entry:last-child {
  border-bottom: none;
}

    Lassen Sie uns sagen, Sie haben eine Liste <li> mit links <a> im inneren, und Sie möchten, zu bekommen, dass die letzten <a> des <li>'s.
    Verwenden Sie einfach:

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

    Wird diese Option die Letzte der .entry - und Ziel-es ist link(s)

    • Ich möchte aber nicht Ziel seiner link(s), ich möchte die Grenze .entry element.
    • Dann verwenden Sie einfach den ersten Teil? Oder habe ich da etwas verpasst?
    • Der erste Teil funktioniert nicht.
    • Das haben Sie wahrscheinlich eine Spezifität problem.
    InformationsquelleAutor JimmyRare
  3. 4

    Ziemlich einfache Lösung:

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

    Für die umfassende browser-Unterstützung, ich würde empfehlen, mit diesem:

    .entry { border-bottom: 1px solid yellow; }
.entry:last-child { border-bottom: 0; }
    • Dies ist nicht anders als in der browser-Unterstützung von .entry:not(:last-child).
    • Stimmt, aber Kevin ' s Weg haben Grenzen, die auf alle Elemente, die auf nicht-unterstützende Browser, sondern als keine, das ist wahrscheinlich pereferable
    • du hast Recht, aber es hängt davon ab, was der OP haben will, als Abbau mit dieser Methode. Alle, oder Keiner.
    • Ich glaube nicht, dass das :nicht-Selektor funktioniert im IE7 oder IE8.
    • Der Hinweis, nur der Hinweis, wenn jemand kommt, über diese, und es hilft; während :und nicht :last-child genau dieselben browser-support :first-child hat ein wenig mehr (ie8 unterstützt :first-child, aber nicht unterstützt werden :nicht oder :last-child). Nur für den Fall dass jemand den Kopf kratzen, warum :last-child und :nicht nicht die gleiche Arbeit wie :first-child im ie8.
    InformationsquelleAutor Kevin Boucher
Schreibe einen Kommentar