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

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