Pemilih anak terakhir CSS: pilih elemen terakhir dari kelas tertentu, bukan anak terakhir di dalam orang tua?

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>

Saya ingin memilih #com19?

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

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

Itu tidak berfungsi selama saya memiliki div.somethinganak terakhir yang sebenarnya di commentList. Apakah mungkin untuk menggunakan pemilih anak terakhir dalam hal ini untuk memilih penampilan terakhir article.comment?

jsFiddle

html css css-selectors matt
sumber

Jawaban:

229

:last-childhanya berfungsi jika elemen yang dimaksud adalah anak terakhir dari wadah, bukan yang terakhir dari jenis elemen tertentu. Untuk itu, kamu mau:last-of-type

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

Sesuai komentar @ BoltClock, ini hanya memeriksa articleelemen terakhir , bukan elemen terakhir dengan kelas .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>
Luaskan cuplikan

Chris
sumber
146
Itu tidak melihat kelas, hanya tipe, jadi jika Anda memiliki non-artikel dengan kelas yang sama Anda akan mendapatkan hasil yang tidak terduga.
BoltClock
1
Ini berfungsi dengan baik. Namun, jika kita membutuhkan mereka untuk mempersempit elemen berdasarkan kelas, itu tidak berfungsi lagi. jsfiddle.net/aliemreeee/a4H7f/2
Ali Emre Çakmakoğlu
12
berdasarkan jawaban ini, saya berasumsi bahwa tidak ada cara untuk memilih last-of-class.
toobulkeh
14
tidak sampai penyeleksi CSS level 4 diterima dan diimplementasikan oleh browser, di mana Anda akan memiliki akses ke :nth-match(selector)dan :nth-last-match(selector). Lihat w3.org/TR/selectors4 untuk detail lebih lanjut.
Chris
1
Atau lebih tepatnya,, :nth-last-child(An+B of selector)seperti :nth-last-match()yang dijatuhkan jauh sebelum itu, tetapi mereka tidak repot-repot memperbarui WD. Lihat stackoverflow.com/questions/21167159/css-nth-match-doesnt-work/…
BoltClock
6

Jika Anda mengapung elemen, Anda dapat membalik urutan

yaitu float: right;bukannyafloat: left;

Dan kemudian gunakan metode ini untuk memilih anak pertama dari suatu kelas.

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

Ini sebenarnya menerapkan kelas ke instance LAST hanya karena sekarang dalam urutan terbalik.

Ini adalah contoh untuk Anda:

<!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
sumber
Perhatikan bahwa ini tidak akan berfungsi jika elemen mengambang didorong ke baris berikutnya (yaitu tidak cukup ruang horizontal untuk mengapung-kanan / kiri)
Ozzy
.some-class~.some-classbekerja bagus untuk saya ketika hanya 2 elemen yang diulang.
Meloman
4

Saya kira jawaban yang paling benar adalah: Gunakan :nth-child(atau, dalam kasus khusus ini, mitranya:nth-last-child ). Sebagian besar hanya tahu pemilih ini dengan argumen pertamanya untuk mengambil berbagai item berdasarkan perhitungan dengan n, tetapi juga dapat mengambil argumen kedua "dari [pemilih CSS apa pun]".

Skenario Anda dapat diselesaikan dengan pemilih ini: .commentList .comment:nth-last-child(1 of .comment)

Tetapi secara teknis benar bukan berarti Anda dapat menggunakannya, karena pemilih ini sekarang hanya diterapkan di Safari.

Untuk bacaan lebih lanjut:

hurrtz
sumber
1

Sesuatu yang saya pikir harus dikomentari di sini yang bekerja untuk saya:

Menggunakan :last-child beberapa kali di tempat-tempat yang dibutuhkan sehingga selalu mendapatkan yang terakhir dari yang terakhir.

Ambil ini sebagai contoh:

.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>
Luaskan cuplikan

Seorang teman
sumber
0

Bagaimana dengan solusi ini?

div.commentList > article.comment:not(:last-child):last-of-type
{
    color:red; /*or whatever...*/
}
lsblsb
sumber
@lsblsb, Anda gunakan di articlesini, jadi: not (: last-child) tidak perlu untuk contoh yang diberikan.
Евгений Масленков
bagaimana jika elemen dengan kelas somethingtidak ada dalam HTML asli dan sedang dimasukkan secara dinamis hover? Bukankah solusi ini akan gagal?
Fr0zenFyr
-1

jika jenis elemen terakhir adalah artikel juga, last-of-typetidak akan berfungsi seperti yang diharapkan.

mungkin saya tidak begitu mengerti cara kerjanya.

demo

Allen
sumber