Selektor ostatniego dziecka w CSS: wybierz ostatni element określonej klasy, a nie ostatnie dziecko wewnątrz rodzica?

176 
<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>

Chcę wybrać #com19?

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

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

To nie działa, dopóki mam inne, div.somethingostatnie dziecko na liście commentList. Czy w tym przypadku można użyć selektora ostatniego elementu podrzędnego, aby wybrać ostatni wygląd article.comment?

jsFiddle

html css css-selectors matowe
źródło

Odpowiedzi:

229

:last-childdziała tylko wtedy, gdy dany element jest ostatnim dzieckiem kontenera, a nie ostatnim elementem określonego typu. Do tego chcesz:last-of-type

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

Zgodnie z komentarzem @ BoltClock, sprawdza to tylko ostatni articleelement, a nie ostatni element z klasą .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>
Rozwiń fragment

Chris
źródło
146
Nie patrzy jednak na klasę, tylko na typ, więc jeśli zdarzy się, że nie masz artykułów z tą samą klasą, otrzymasz nieoczekiwane wyniki.
BoltClock
1
Działa poprawnie. Jeśli jednak potrzebujemy ich do zawężenia elementów według klasy, to nie działa ponownie. jsfiddle.net/aliemreeee/a4H7f/2
Ali Emre Çakmakoğlu
12
na podstawie tych odpowiedzi zakładam, że nie ma sposobu, aby dokonać wyboru last-of-class.
toobulkeh
14
Dopiero gdy selektory CSS poziomu 4 zostaną zaakceptowane i zaimplementowane przez przeglądarki, w których będziesz mieć dostęp do :nth-match(selector)i :nth-last-match(selector). Więcej szczegółów znajdziesz na w3.org/TR/selectors4 .
Chris,
1
A raczej, :nth-last-child(An+B of selector)jak :nth-last-match()zostało usunięte długo wcześniej, ale nie zadali sobie trudu, aby zaktualizować WD. Zobacz stackoverflow.com/questions/21167159/css-nth-match-doesnt-work/…
BoltClock
6

Jeśli pływasz elementami, możesz odwrócić kolejność

tj. float: right;zamiastfloat: left;

Następnie użyj tej metody, aby wybrać pierwsze dziecko z klasy.

/* 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;
}

W rzeczywistości jest to stosowanie tej klasy tylko do OSTATNIEJ instancji, ponieważ jest teraz w odwrotnej kolejności.

Oto działający przykład:

<!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
źródło
Zwróć jednak uwagę, że to nie zadziała, jeśli elementy pływające zostaną przesunięte do następnej linii (tj. Za mało miejsca w poziomie, aby unosić się w prawo / lewo)
Ozzy
.some-class~.some-classdziała świetnie, gdy powtarzają się tylko 2 elementy.
Meloman
4

Myślę, że najbardziej poprawna odpowiedź brzmi: użyj :nth-child(lub w tym konkretnym przypadku jego odpowiednika:nth-last-child ). Większość zna ten selektor tylko po pierwszym argumencie, aby pobrać zakres elementów w oparciu o obliczenia z n, ale może również przyjąć drugi argument „z [dowolnego selektora CSS]”.

Twój scenariusz można rozwiązać za pomocą tego selektora: .commentList .comment:nth-last-child(1 of .comment)

Jednak bycie poprawnym technicznie nie oznacza, że ​​możesz go używać, ponieważ ten selektor jest obecnie zaimplementowany tylko w Safari.

Więcej informacji:

hurrtz
źródło
1

Coś, co moim zdaniem powinno zostać tutaj skomentowane, co zadziałało dla mnie:

Posługiwać się :last-child wielokrotnie w potrzebnych miejscach, aby zawsze dotarło do ostatniego z ostatnich.

Weź to na przykład:

.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>
Rozwiń fragment

Przyjaciel
źródło
0

A co z tym rozwiązaniem?

div.commentList > article.comment:not(:last-child):last-of-type
{
    color:red; /*or whatever...*/
}
lsblsb
źródło
@lsblsb, używasz articletutaj, więc: not (: last-child) nie jest konieczne dla podanego przykładu.
Евгений Масленков
co, jeśli element z klasą somethingnie istnieje w oryginalnym HTML i jest wstawiany dynamicznie hover? Czy to rozwiązanie nie zawiedzie?
Fr0zenFyr
-1

jeśli ostatnim typem elementu jest również artykuł, last-of-typenie będzie działać zgodnie z oczekiwaniami.

może naprawdę nie rozumiem, jak to działa.

próbny

Allen
źródło