Wie kann ich das letzte Element mit einer bestimmten Klasse auswählen, nicht das letzte untergeordnete Element innerhalb des übergeordneten Elements?

Lesezeit: 6 Minuten

Wie kann ich das letzte Element mit einer bestimmten Klasse
matt

<div class="commentList">
   <article class="comment " id="com21"></article>
   <article class="comment " id="com20"></article>
   <article class="comment " id="com19"></article>
   <div class="something"> hello </div>
</div>

Ich möchte auswählen #com19 ?

.comment {
    width:470px;
    border-bottom:1px dotted #f0f0f0;
    margin-bottom:10px;
}

.comment:last-child {
    border-bottom:none;
    margin-bottom:0;
}

Das geht nicht, solange ich einen anderen habe div.something als tatsächlich letztes Kind in der Kommentarliste. Ist es in diesem Fall möglich, den Last-Child-Selektor zu verwenden, um das letzte Erscheinungsbild von auszuwählen article.comment?

jsFiddle

  • verknüpft: das „letzte Kind“ mit einem bestimmten Klassennamen in CSS auswählen?

    – vsync

    23. Juli 2020 um 8:25 Uhr

Wie kann ich das letzte Element mit einer bestimmten Klasse
Chris

:last-child funktioniert nur, wenn das fragliche Element das letzte untergeordnete Element des Containers ist, nicht das letzte eines bestimmten Elementtyps. Dafür willst du :last-of-type

http://jsfiddle.net/C23g6/3/

Laut dem Kommentar von @ BoltClock wird hier nur nach dem letzten gesucht article Element, nicht das letzte Element mit der Klasse von .comment.

body {
  background: black;
}

.comment {
  width: 470px;
  border-bottom: 1px dotted #f0f0f0;
  margin-bottom: 10px;
}

.comment:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
}
<div class="commentList">
  <article class="comment " id="com21"></article>

  <article class="comment " id="com20"></article>

  <article class="comment " id="com19"></article>

  <div class="something"> hello </div>
</div>

  • Es betrachtet jedoch nicht die Klasse, sondern nur den Typ. Wenn Sie also zufällig Nicht-Artikel mit derselben Klasse haben, erhalten Sie unerwartete Ergebnisse.

    – BoltClock

    4. September 2011 um 8:34 Uhr

  • Es funktioniert einwandfrei. Wenn wir sie jedoch brauchen, um Elemente nach Klasse einzugrenzen, funktioniert es wieder nicht. jsfiddle.net/aliemreeee/a4H7f/2

    – Ali Emre Çakmakoğlu

    14. Mai 2014 um 13:38 Uhr


  • Basierend auf diesen Antworten gehe ich davon aus, dass es keine Möglichkeit gibt, auszuwählen last-of-class.

    – toobulkeh

    27. Januar 2015 um 15:52 Uhr

  • erst wenn CSS-Selektoren Level 4 akzeptiert und von Browsern implementiert werden, auf die Sie Zugriff haben :nth-match(selector) und :nth-last-match(selector). Sehen w3.org/TR/selectors4 für mehr Details.

    – Chris

    9. Februar 2015 um 22:55 Uhr

  • Oder eher, :nth-last-child(An+B of selector)als :nth-last-match() wurde lange vorher gelöscht, aber sie haben sich nicht die Mühe gemacht, das WD zu aktualisieren. Siehe stackoverflow.com/questions/21167159/css-nth-match-doesnt-work/…

    – BoltClock

    12. Januar 2018 um 19:42 Uhr

Ich denke, die richtigste Antwort ist: Verwenden :nth-child (oder in diesem speziellen Fall sein Gegenstück :nth-last-child). Die meisten kennen diesen Selektor nur durch sein erstes Argument, um eine Reihe von Elementen basierend auf einer Berechnung mit n zu erfassen, aber er kann auch ein zweites Argument “von” annehmen [any CSS selector]”.

Ihr Szenario könnte mit diesem Selektor gelöst werden: .commentList .comment:nth-last-child(1 of .comment)

Aber technisch korrekt zu sein bedeutet noch lange nicht, dass man ihn verwenden kann, denn dieser Selektor ist bisher nur in Safari implementiert.

Zum Weiterlesen:

Wenn Sie die Elemente schweben lassen, können Sie die Reihenfolge umkehren

dh float: right; anstatt float: left;

Verwenden Sie dann diese Methode, um das erste untergeordnete Element einer Klasse auszuwählen.

/* 1: Apply style to ALL instances */
#header .some-class {
  padding-right: 0;
}
/* 2: Remove style from ALL instances except FIRST instance */
#header .some-class~.some-class {
  padding-right: 20px;
}

Dies wendet die Klasse tatsächlich nur auf die LETZTE Instanz an, da sie jetzt in umgekehrter Reihenfolge ist.

Hier ist ein funktionierendes Beispiel für Sie:

<!doctype html>
<head><title>CSS Test</title>
<style type="text/css">
.some-class { margin: 0; padding: 0 20px; list-style-type: square; }
.lfloat { float: left; display: block; }
.rfloat { float: right; display: block; }
/* apply style to last instance only */
#header .some-class {
  border: 1px solid red;
  padding-right: 0;
}
#header .some-class~.some-class {
  border: 0;
  padding-right: 20px;
}
</style>
</head>
<body>
<div id="header">
  <img src="https://stackoverflow.com/questions/7298057/some_image" title="Logo" class="lfloat no-border"/>
  <ul class="some-class rfloat">
    <li>List 1-1</li>
    <li>List 1-2</li>
    <li>List 1-3</li>
  </ul>
  <ul class="some-class rfloat">
    <li>List 2-1</li>
    <li>List 2-2</li>
    <li>List 2-3</li>
  </ul>
  <ul class="some-class rfloat">
    <li>List 3-1</li>
    <li>List 3-2</li>
    <li>List 3-3</li>
  </ul>
  <img src="some_other_img" title="Icon" class="rfloat no-border"/>
</div>
</body>
</html>

  • Beachten Sie jedoch, dass dies nicht funktioniert, wenn die schwebenden Elemente auf die nächste Zeile geschoben werden (dh nicht genügend horizontaler Platz, um nach rechts/links zu schweben).

    – Ozzy

    29. Juli 2013 um 1:03 Uhr

  • .some-class~.some-class funktioniert super für mich, wenn nur 2 Elemente wiederholt werden.

    – Melomann

    5. April 2018 um 11:39 Uhr

Etwas, von dem ich denke, dass es hier kommentiert werden sollte, was für mich funktioniert hat:

Verwenden :last-child mehrfach an den benötigten Stellen, damit es immer das Letzte vom Letzten bekommt.

Nehmen Sie zum Beispiel dies:

.page.one .page-container .comment:last-child {
  color: red;
}
.page.two .page-container:last-child .comment:last-child {
  color: blue;
}
<p> When you use .comment:last-child </p>
<p> you only get the last comment in both parents </p>

<div class="page one">
  <div class="page-container">
    <p class="comment"> Something </p>
    <p class="comment"> Something </p>
  </div>

  <div class="page-container">
    <p class="comment"> Something </p>
    <p class="comment"> Something </p>
  </div>
</div>

<p> When you use .page-container:last-child .comment:last-child </p>
<p> you get the last page-container's, last comment </p>

<div class="page two">
  <div class="page-container">
    <p class="comment"> Something </p>
    <p class="comment"> Something </p>
  </div>

  <div class="page-container">
    <p class="comment"> Something </p>
    <p class="comment"> Something </p>
  </div>
</div>

1646314926 135 Wie kann ich das letzte Element mit einer bestimmten Klasse
lsblsb

Was ist mit dieser Lösung?

div.commentList > article.comment:not(:last-child):last-of-type
{
    color:red; /*or whatever...*/
}

  • @lsblsb, Sie verwenden article hier ist also :not(:last-child) für das gegebene Beispiel nicht erforderlich.

    – Eвгений Масленков

    5. Dezember 2016 um 9:34 Uhr

  • Was wäre, wenn das Element mit Klasse something existiert nicht im ursprünglichen HTML und wird dynamisch eingefügt hover? Wird diese Lösung nicht scheitern?

    – Fr0zenFyr

    26. März 2018 um 7:34 Uhr

Wie kann ich das letzte Element mit einer bestimmten Klasse
Allen

wenn der letzte Elementtyp auch Artikel ist, last-of-type wird nicht wie erwartet funktionieren.

vielleicht verstehe ich nicht wirklich, wie es funktioniert.

Demo

  • @lsblsb, Sie verwenden article hier ist also :not(:last-child) für das gegebene Beispiel nicht erforderlich.

    – Eвгений Масленков

    5. Dezember 2016 um 9:34 Uhr

  • Was wäre, wenn das Element mit Klasse something existiert nicht im ursprünglichen HTML und wird dynamisch eingefügt hover? Wird diese Lösung nicht scheitern?

    – Fr0zenFyr

    26. März 2018 um 7:34 Uhr

923960cookie-checkWie kann ich das letzte Element mit einer bestimmten Klasse auswählen, nicht das letzte untergeordnete Element innerhalb des übergeordneten Elements?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy