¿Cómo puedo seleccionar el último elemento con una clase específica, no el último hijo dentro del padre?

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

¿Quiero seleccionar #com19?

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

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

Eso no funciona mientras tenga otro hijo div.somethingcomo último hijo real en la lista de comentarios. ¿Es posible utilizar el selector de último hijo en este caso para seleccionar la última aparición de article.comment?

jsFiddle

Sep 04 '11 15:09 matt

:last-childsólo funciona cuando el elemento en cuestión es el último hijo del contenedor, no el último de un tipo específico de elemento. Para eso quieres:last-of-type

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

Según el comentario de @BoltClock, esto solo busca el último articleelemento, no el último elemento con la clase .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>

Expandir fragmento

Sep 04 '2011 08:09 Chris

Esto ahora se puede resolver con un uso cuidadoso de :has(), específicamente:

/* switch out the {class} below */
.{class}:not(:has(~ .{class}))

Una técnica similar también le permite seleccionar cualquier cosa menos la última aparición de una clase en un contenedor o la última aparición dentro de un grupo de elementos. Vea el fragmento a continuación para ver ejemplos.

Nota: has()actualmente es compatible con Chrome, Edge, Safari y Firefox desde al menos diciembre de 2023.

Mostrar fragmento de código

/* last in group */
.class:has(+ :not(.class)) {
  background: pink;
}
/* anything but last in container */
.class:has(~ .class) {
  box-shadow: 0 0 0 1px #F00A;
}
/* last in container */
.class:not(:has(~ .class)) {
  background: #0F0A;
}

<div>
   <div class="class">not-last</div>
   <div class="class">not-last</div>
   <div class="class">last-in-group</div>
   <div>---</div>
   <div class="class">not-last</div>
   <div class="class">last-in-group</div>
   <div>---</div>
   <div class="class">last-class</div>
   <div>---</div>
</div>

Expand snippet

Jan 22 '2023 13:01 som

Supongo que la respuesta más correcta es: Usar :nth-child(o, en este caso concreto, su contraparte :nth-last-child). La mayoría solo conoce este selector por su primer argumento para tomar un rango de elementos basado en un cálculo con n, pero también puede tomar un segundo argumento "de [cualquier selector CSS]".

Tu escenario podría resolverse con este selector:.commentList .comment:nth-last-child(1 of .comment)

Pero ser técnicamente correcto no significa que puedas usarlo, porque este selector por ahora solo está implementado en Safari.

Para más lecturas:

https://drafts.csswg.org/selectors-4/#the-nth-child-pseudo
http://caniuse.com/#search=nth-child

Aug 17 '2017 13:08 hurrtz