Selettore CSS ultimo figlio: seleziona l'ultimo elemento di una classe specifica, non l'ultimo figlio all'interno del genitore?

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>

Voglio selezionare #com19?

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

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

Ciò non funziona finché ne ho un altro div.somethingcome l'ultimo figlio effettivo nella lista dei commenti. È possibile utilizzare il selettore dell'ultimo figlio in questo caso per selezionare l'ultima apparizione di article.comment?

jsFiddle

html css css-selectors

— opaco
fonte

229

:last-childfunziona solo quando l'elemento in questione è l'ultimo figlio del contenitore, non l'ultimo di un tipo specifico di elemento. Per quello, vuoi:last-of-type

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

Secondo il commento di @ BoltClock, questo sta solo controllando l'ultimo articleelemento, non l'ultimo con la classe di .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>

Espandi frammento

— Chris
fonte

146

Tuttavia, non esamina la classe, ma solo il tipo, quindi se ti capita di non avere articoli con la stessa classe otterrai risultati imprevisti.

— BoltClock

1

Funziona correttamente Tuttavia, se ne abbiamo bisogno per restringere gli elementi per classe, non funziona più. jsfiddle.net/aliemreeee/a4H7f/2

— Ali Emre Çakmakoğlu

12

sulla base di queste risposte, presumo che non sia possibile selezionare last-of-class.

— toobulkeh,

14

fino a quando i selettori CSS di livello 4 non saranno accettati e implementati dai browser, ai quali avrai accesso :nth-match(selector)e :nth-last-match(selector). Vedi w3.org/TR/selectors4 per maggiori dettagli.

— Chris,

1

O meglio, :nth-last-child(An+B of selector)come è :nth-last-match()stato abbandonato molto prima, ma non si sono preoccupati di aggiornare WD. Vedere stackoverflow.com/questions/21167159/css-nth-match-doesnt-work/...

— BoltClock

6

Se stai fluttuando gli elementi puoi invertire l'ordine

vale a dire float: right; invece difloat: left;

Quindi utilizza questo metodo per selezionare il primo figlio di una classe.

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

Questo sta effettivamente applicando la classe all'ULTIMA istanza solo perché ora è in ordine inverso.

Ecco un esempio funzionante per te:

<!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
fonte

Nota che questo non funzionerà se gli elementi fluttuanti vengono spinti sulla riga successiva (cioè non abbastanza spazio orizzontale per float-destra / sinistra)

— Ozzy

.some-class~.some-classfunziona benissimo per me quando si ripetono solo 2 elementi.

— Meloman,

4

Immagino che la risposta più corretta sia: utilizzare :nth-child(o, in questo caso specifico, la sua controparte:nth-last-child ). La maggior parte conosce questo selettore solo dal suo primo argomento per afferrare un intervallo di elementi basato su un calcolo con n, ma può anche prendere un secondo argomento "di [qualsiasi selettore CSS]".

Il tuo scenario potrebbe essere risolto con questo selettore: .commentList .comment:nth-last-child(1 of .comment)

Ma essere tecnicamente corretti non significa che puoi usarlo, perché questo selettore è attualmente implementato solo in Safari.

Per ulteriori letture:

— hurrtz
fonte

1

Qualcosa che penso dovrebbe essere commentato qui che ha funzionato per me:

Utilizzare :last-childpiù volte nei luoghi necessari in modo da ottenere sempre l'ultimo degli ultimi.

Prendi questo per esempio:

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

Espandi frammento

— Un amico
fonte

0

E questa soluzione?

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

— lsblsb
fonte

@lsblsb, si usa articlequi, quindi: not (: last-child) non è necessario per un dato esempio.

— Евгений Масленков

cosa succede se l'elemento con classe somethingnon esiste nell'HTML originale e viene inserito dinamicamente hover? Questa soluzione non fallirà?

— Fr0zenFir

-1

se l'ultimo tipo di elemento è anche l'articolo, last-of-typenon funzionerà come previsto.

forse non capisco davvero come funzioni.

dimostrazione

— Allen
fonte