Usando: último-niño con el selector de clase

Question

Quiero pegar el último/segundo .heading.

<ul> 
    <li class="heading">Hello world</li> 
    <li>Hello world</li> 
    <li>Hello world</li> 
    <li class="heading">Hello world</li> 
    <li>Hello world</li> 
</ul> 

Ni

ul li.heading:last-child { 
    background: black; 
} 

ni

ul li.heading:nth-child(2) { 
    background: black; 
} 

funciona para mí. ¿Por qué y cómo puedo aplicar estilos a ese <li>? Parece que los selectores de pseudo-clase no funcionan con los selectores de clase. Lo cual es extraño ya que podría haber jurado que lo había usado antes.

Actualización: Vaya, se olvidó por completo the jsfiddle.

Answer 1

Su declaración fue: "Quiero estilizar el último segundo .heading /"

eso significaría que tendría que escribir el código como el siguiente:

<ul> 
    <li class="heading">Hello world</li> 
    <li class="heading">Hello world</li> 
    <li class="heading">Hello world</li> 
    <li class="heading">Hello world</li> 
    <li class="heading">Hello world</li> 
</ul> 

Y el CSS:

ul li.heading:last-child { 
    background: black; 
} 
ul li.heading:nth-child(2) { 
    background: black; 
} 

lo demás, con su actual código HTML, podría escribir:

ul li.heading:nth-child(4) { 
    background: black; 
} 
ul li.heading:nth-child(1) { 
    background: black; 
} 

Entiendo su pensamiento, pero la lis con la clase "encabezado" no es el segundo o el último hijo.

Answer 2

Esto es porque li.heading no es el último hijo ni es el segundo hijo. Es el primer y el cuarto hijo de la ul

seguirlo:

ul li.heading:nth-child(4) { 
    background: black; 
} 

Answer 3

ul li.heading:nth-last-child(2) 

2 significa que se sabe cuántos de <li> son de sus li class = < "la partida" > en nuestro caso es penúltimo.