CSS-Auswahl für das letzte Kind: Wählen Sie das letzte Element einer bestimmten Klasse aus, nicht das letzte Kind innerhalb des Elternteils.

175 
<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 funktioniert nicht, solange ich ein anderes div.somethingals tatsächliches letztes Kind in der Kommentarliste habe. Ist es in diesem Fall möglich, den Last-Child-Selektor zu verwenden, um das letzte Erscheinungsbild von auszuwählen article.comment?

jsFiddle

html css css-selectors matt
quelle

Antworten:

228

:last-childfunktioniert nur, wenn das betreffende 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/

Gemäß dem Kommentar von @ BoltClock wird nur nach dem letzten articleElement gesucht , nicht nach dem letzten 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>
Erweitern Sie das Snippet

Chris
quelle
146
Es wird jedoch nicht die Klasse, sondern nur der Typ betrachtet. Wenn Sie also Nicht-Artikel mit derselben Klasse haben, erhalten Sie unerwartete Ergebnisse.
BoltClock
1
Es funktioniert richtig. Wenn sie jedoch Elemente nach Klassen eingrenzen müssen, funktioniert dies nicht erneut. jsfiddle.net/aliemreeee/a4H7f/2
Ali Emre Çakmakoğlu
12
Aufgrund dieser Antworten gehe ich davon aus, dass es keine Möglichkeit zur Auswahl gibt last-of-class.
Toobulkeh
14
Erst wenn CSS-Selektoren der Stufe 4 von Browsern akzeptiert und implementiert werden, haben Sie Zugriff auf :nth-match(selector)und :nth-last-match(selector). Weitere Informationen finden Sie unter w3.org/TR/selectors4 .
Chris
1
Oder besser gesagt, :nth-last-child(An+B of selector)wie :nth-last-match()schon lange zuvor, aber sie haben sich nicht die Mühe gemacht, den WD zu aktualisieren. Siehe stackoverflow.com/questions/21167159/css-nth-match-doesnt-work/…
BoltClock
6

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

dh float: right;stattfloat: 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 LAST-Instanz an, da sie jetzt in umgekehrter Reihenfolge vorliegt.

Hier ist ein Arbeitsbeispiel 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="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>
Ozzy
quelle
Beachten Sie jedoch, dass dies nicht funktioniert, wenn die schwebenden Elemente in die nächste Zeile verschoben werden (dh nicht genügend horizontaler Raum, um nach rechts / links zu schweben)
Ozzy
.some-class~.some-classfunktioniert gut für mich, wenn nur 2 Elemente wiederholt werden.
Meloman
4

Ich denke, dass die richtigste Antwort lautet: Verwenden Sie :nth-child(oder in diesem speziellen Fall das Gegenstück :nth-last-child). Die meisten kennen diesen Selektor nur anhand seines ersten Arguments, um einen Bereich von Elementen basierend auf einer Berechnung mit n zu erfassen, aber es kann auch ein zweites Argument "von [jedem CSS-Selektor]" verwendet werden.

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

Technisch korrekt zu sein bedeutet jedoch nicht, dass Sie es verwenden können, da dieser Selektor derzeit nur in Safari implementiert ist.

Zur weiteren Lektüre:

Hurrtz
quelle
1

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

Verwenden Sie es :last-childmehrmals an den benötigten Stellen, damit es immer das Letzte vom Letzten erhält.

Nehmen Sie zum Beispiel:

.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>
Erweitern Sie das Snippet

Ein Freund
quelle
0

Was ist mit dieser Lösung?

div.commentList > article.comment:not(:last-child):last-of-type
{
    color:red; /*or whatever...*/
}
lsblsb
quelle
@lsblsb, Sie verwenden articlehier, also: not (: last-child) ist für ein bestimmtes Beispiel nicht erforderlich.
Евгений Масленков
Was ist, wenn das Element mit Klasse somethingnicht im ursprünglichen HTML vorhanden ist und dynamisch eingefügt wird hover? Wird diese Lösung nicht scheitern?
Fr0zenFyr
-1

Wenn der letzte Elementtyp auch Artikel ist, last-of-typefunktioniert dies nicht wie erwartet.

Vielleicht verstehe ich nicht wirklich, wie es funktioniert.

Demo

Allen
quelle