Uso: ultimo figlio con selettore di classe

Question

Voglio modellare l'ultimo/secondo .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> 

Né

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

né

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

funziona per me. Perché e come posso applicare gli stili a quello <li>? Sembra che i selettori di pseudo-classe non funzionino con i selettori di classe. Il che è strano visto che avrei giurato di averlo usato prima.

Aggiornamento: Oops, totalmente dimenticato the jsfiddle.

Answer 1

La sua dichiarazione è stata: "Io voglio per lo stile all'ultimo secondo .heading /"

Ciò significherebbe che si dovrebbe scrivere il codice come questo:

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

E il CSS:

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

Altrimenti, con il codice HTML corrente, si può scrivere:

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

Capisco il tuo pensiero, ma il lis con la classe "direzione" non è il secondo o l'ultimo figlio.

Answer 2

Questo perché li.heading non è l'ultimo figlio né è il secondo figlio. E 'il primo e il quarto figlio del ul

dare una prova:

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

Answer 3

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

2 significa che si sa quanti di <li> sono secondo i vostri < li class = "heading" > nel nostro caso è al penultimo posto.