Perché .class: last-of-type non funziona?

Question

Perché non funziona? http://jsfiddle.net/84C5W/1/

<style> 
    p{ 
    display : none; 
    } 
    p.visible:last-of-type { 
    display : block; 
    }​ 
</style> 
<div> 
    <p class="visible">This should be hidden</p> 
    <p class="visible">This should be displayed</p> 
    <p class="">This should be hidden</p> 
</div> 

In realtà, nessuno dei miei <p> 's sono visibili. Se rimuovo il riferimento a ".visible" nel foglio di stile, questo mostra l'ultimo <p> nel div, ma questo non è quello che voglio.

Ovviamente potrei mantenere solo un ".visibile" in ogni momento, ma questo è per una presentazione di reveal.js e non ho il controllo su javascript. Solo il foglio di stile ...

: Ok, quindi ovviamente .class: last-of-type non funziona. Come messo da @Justus Romijn, la pseudo classe: last-of-type è stata progettata per selezionare solo gli elementi (che a mio parere è enormemente limitante e pone questa particolare pseudo classe in uno stato più o meno inutile).

In ogni caso, voglio riformulare la mia domanda a questo punto: Come posso selezionare l'ultimo elemento all'interno del div WITH the class ".visible"? NON voglio usare Javascript per questo.

Answer 1

ho fatto dei test, ma il selettore last-of-type funziona solo sul nodo-selettori, non classnames.

HTML:

<p class="visible">First paragraph.</p> 
<p class="visible">Second paragraph.</p> 
<p>Third paragraph.</p> 

CSS:

p:last-of-type{ 
    /* this will be applied in the third paragraph bacause the pseudo-selector is applied to nodes only */ 
    font-weight: bold; 
} 
p.visible:last-of-type { 
    /* this does not get applied, because you are using the pseudo-selector with a class. */ 
    display: block; 
} 

Dal W3C:

L': last-of-type pseudo-classe rappresenta un elemento che è l'ultimo fratello del suo tipo nella lista dei figli del suo elemento genitore.

Perché deve essere un fratello, ignora i nomi di classe probabilmente perché quindi è possibile mescolarlo con altri elementi.

Perché non c'è seguito dal selettore o genitore? Ciò potrebbe potenzialmente bloccare la memoria di molte pagine Web modificando dinamicamente un solo nome di classe nella pagina. Fare ampio uso dei selettori CSS3 è già pesante sul browser e non raccomandato.

Dave Hyatt, mentre si lavora sulla realizzazione WebKit nel 2008, mentioned some reasons why these implementations are avoided:

Con selettori genitore diventa estremamente facile da causare accidentalmente un grovel in tutto il documento. Le persone possono e useranno male questo selettore. Il supporto è dare alla gente un sacco di corda per impiccarsi con.

La triste verità sui selettori CSS3 è che in realtà non dovrebbero essere usati se si preoccupano delle prestazioni della pagina. Decorare il tuo markup con classi e ID e corrispondere puramente a quelli evitando tutti gli usi di selettori di fratelli, discendenti e figli renderà in effetti una pagina significativamente migliore in tutti i browser.

Answer 2

Il problema è che :last-of-type corrisponde solo al selettore di elementi. Nel tuo esempio, provi ad abbinare un selettore class. Ecco perché non funziona.

Un esempio: http://dabblet.com/gist/4144885

Answer 3

nel mio caso, ho fatto un errore.

p.visible : last-of-type (x) 
p.visible:last-of-type (o) 

proprio quello ii fatto

Answer 4

Per riferimento futuro, questo sarà coperto in CSS di livello 4: il supporto del browser https://www.w3.org/TR/selectors4/#the-nth-last-match-pseudo

al momento della scrittura, è inesistente: http://css4-selectors.com/selector/css4/structural-pseudo-class/

Quando questo è pronto, questa dovrebbe essere la soluzione:

p { 
 
    display : none; 
 
} 
 
p.visible:nth-last-match(0) { 
 
    display : block; 
 
}

<div> 
 
    <p class="visible">This should be hidden</p> 
 
    <p class="visible">This should be displayed</p> 
 
    <p class="">This should be hidden</p> 
 
</div>

Answer 5

Indirizza il penultimo tag.

.visible:nth-last-of-type(2);