: last-child not working as expected?

Question

: last-child not working as expected?

El problema radica en este CSS y HTML. Aquí hay un enlace a jsFiddle con el código de ejemplo.

HTML

<ul>
    <li class"complete">1</li>
    <li class"complete">2</li>
    <li>3</li>
    <li>4</li>
</ul>

CSS

li.complete:last-child {
    background-color:yellow;
}

li.complete:last-of-type {
    background-color:yellow;
}

¿Ninguna de estas líneas de CSS debería apuntar al elemento last li con la clase "complete" ?

Esta consulta en jQuery tampoco se dirige a ella:

$("li.complete:last-child");

Pero éste sí:

$("li.complete").last();

li {
  background-color: green;
}
li.complete:first-child {
  background-color: white;
}
li.complete:first-of-type {
  background-color: red;
}
li.complete:last-of-type {
  background-color: blue;
}
li.complete:last-child {
  background-color: yellow;
}

<ul>
  <li class="complete">1</li>
  <li class="complete">2</li>
  <li>3</li>
  <li>4</li>
</ul>

54

css css-selectors html html5 css3

Author: Harry, 2013-09-25

Source

3 answers

: last-child no funcionará si el elemento no es EL ÚLTIMO elemento

Además de la respuesta de Harry, creo que es crucial agregar/enfatizar que :last-child no funcionará si el elemento no es el ÚLTIMO elemento en un contenedor. Por cualquier razón, me tomó horas darme cuenta de eso, y aunque la respuesta de Harry es muy exhaustiva, no pude extraer esa información de " El selector de último hijo se usa para seleccionar el último elemento hijo de un padre."

Supongamos que este es mi selector: a:last-child {}

Esto funciona:

<div>
    <a></a>
    <a>This will be selected</a>
</div>

Esto no:

<div>
    <a></a>
    <a>This will no longer be selected</a>
    <div>This is now the last child :'( </div>
</div>

No lo hace porque el elemento a no es el último elemento dentro de su padre.

Puede ser obvio, pero no fue para mí...

56

Author: Govind Rai,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-03-16 15:48:07

As last-child se usa para seleccionar el último elemento hijo de un elemento padre. puedes lograr lo mismo así

<ul>
    <li class="complete" id="one">1</li>
    <li class="complete" id="two">2</li>
    <li>3</li>
    <li>4</li>
</ul>


li.complete#one{background-color:yellow;} 

li.complete#two{background-color:red;}

Dale id a tu lista y luego dale el estilo o lo que quieras

-10

Author: Nikhil salwe,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-09-25 11:51:58

score 97 · Accepted Answer

El selector last-child se utiliza para seleccionar el último elemento secundario de un padre. No se puede usar para seleccionar el último elemento secundario con una clase específica bajo un elemento padre dado.

La otra parte del selector compuesto (que se adjunta antes de :last-child) especifica condiciones adicionales que el último elemento hijo debe satisfacer para que sea seleccionado. En el siguiente fragmento, verá cómo difieren los elementos seleccionados dependiendo del resto del compuesto selector.

.parent :last-child{ /* this will select all elements which are last child of .parent */
  font-weight: bold;
}

.parent div:last-child{ /* this will select the last child of .parent only if it is a div*/
  background: crimson;
}

.parent div.child-2:last-child{ /* this will select the last child of .parent only if it is a div and has the class child-2*/
  color: beige;
}

<div class='parent'>
  <div class='child'>Child</div>
  <div class='child'>Child</div>
  <div class='child'>Child</div>
  <div>Child w/o class</div>
</div>
<div class='parent'>
  <div class='child'>Child</div>
  <div class='child'>Child</div>
  <div class='child'>Child</div>
  <div class='child-2'>Child w/o class</div>
</div>
<div class='parent'>
  <div class='child'>Child</div>
  <div class='child'>Child</div>
  <div class='child'>Child</div>
  <p>Child w/o class</p>
</div>

Para responder a su pregunta, lo siguiente estilizaría el último elemento secundario li con el color de fondo como rojo.

li:last-child{
    background-color: red;
}

Pero el siguiente selector no funcionaría para su marcado porque el last-child no tiene el class='complete' a pesar de que es un li.

li.complete:last-child{
    background-color: green;
}

Habría funcionado si (y solo si) el último li en su marcado también tuviera class='complete'.

Para abordar su consulta en el comentarios :

@ Harry me parece bastante extraño que: .completo: el último tipo no funciona, todavía .completo: el primero de tipo funciona, independientemente de su posición, su elemento padre. Gracias por tu ayuda.

El selector .complete:first-of-type funciona en el violín porque (es decir, el elemento con class='complete') sigue siendo el primer elemento de tipo li dentro del padre. Intente agregar <li>0</li> como el primer elemento debajo de ul y encontrará que first-of-type también falla. Esto es porque los selectores first-of-type y last-of-type seleccionan el primer/último elemento de cada tipo bajo el padre.

Consulte la respuesta publicada por BoltClock, en este hilo para obtener más detalles sobre cómo funciona el selector. Eso es tan completo como se pone:)