Selector CSS de último hijo: seleccione el último elemento de una clase específica, ¿no el último hijo dentro del padre?

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>

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 siempre que tenga otro div.somethingcomo el último hijo real en la lista de comentarios. ¿Es posible usar el selector de último hijo en este caso para seleccionar la última aparición de article.comment?

jsFiddle

html css css-selectors mate
fuente

Respuestas:

229

:last-childsolo funciona cuando el elemento en cuestión es el último elemento secundario 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 verifica el último articleelemento, no el último elemento con la clase de .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

Chris
fuente
146
Sin embargo, no mira la clase, solo el tipo, por lo que si no tiene artículos con la misma clase obtendrá resultados inesperados.
BoltClock
1
Funciona correctamente Sin embargo, si necesitamos que reduzcan los elementos por clase, no funcionará nuevamente. jsfiddle.net/aliemreeee/a4H7f/2
Ali Emre Çakmakoğlu
12
basado en estas respuestas, supongo que no hay forma de seleccionar last-of-class.
toobulkeh
14
no hasta que los navegadores acepten e implementen selectores CSS de nivel 4, donde tendrá acceso a :nth-match(selector)y :nth-last-match(selector). Ver w3.org/TR/selectors4 para más detalles.
Chris
1
O más bien, :nth-last-child(An+B of selector)como :nth-last-match()se dejó caer mucho antes, pero no se han molestado en actualizar el WD. Ver stackoverflow.com/questions/21167159/css-nth-match-doesnt-work/…
BoltClock
6

Si está flotando los elementos, puede invertir el orden

es decir, en float: right;lugar defloat: left;

Y luego use este método para seleccionar el primer hijo de una clase.

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

En realidad, esto está aplicando la clase a la ÚLTIMA instancia solo porque ahora está en orden inverso.

Aquí hay un ejemplo de trabajo para usted:

<!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
fuente
Tenga en cuenta que esto no funcionará si los elementos flotantes se empujan a la siguiente línea (es decir, no hay suficiente espacio horizontal para flotar-derecha / izquierda)
Ozzy
.some-class~.some-classfunciona muy bien para mí cuando solo se repiten 2 elementos.
Meloman
4

Supongo que la respuesta más correcta es: Uso :nth-child(o, en este caso específico, 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]".

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

Sin embargo, ser técnicamente correcto no significa que pueda usarlo, ya que este selector solo está implementado en Safari.

Para más lectura:

Hurrtz
fuente
1

Algo que creo que debería comentarse aquí que funcionó para mí:

Use :last-childvarias veces en los lugares necesarios para que siempre obtenga el último de los últimos.

Toma esto por ejemplo:

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

Un amigo
fuente
0

¿Qué hay de esta solución?

div.commentList > article.comment:not(:last-child):last-of-type
{
    color:red; /*or whatever...*/
}
lsblsb
fuente
@lsblsb, se usa articleaquí, por lo que: not (: last-child) no es necesario para el ejemplo dado.
Евгений Масленков
¿Qué somethingpasa si el elemento con clase no existe en HTML original y se está insertando dinámicamente hover? ¿No fallará esta solución?
Fr0zenFyr
-1

si el último tipo de elemento es artículo también, last-of-typeno funcionará como se esperaba.

tal vez no entiendo realmente cómo funciona.

manifestación

Allen
fuente