:comportamento do seletor last-of-type

A pseudoclasse :last-of-type tem como alvo o último elemento de um tipo especificado dentro de um contêiner pai. No entanto, no contexto do seu seletor CSS (p.visible:last-of-type), é importante observar que :last-of-type se aplica apenas a tipos de elementos e não a instâncias de classe.

No seu Marcação HTML:

  
This should be hidden
  
This should be displayed
  
This should be hidden

O problema surge porque :last-of-type tem como alvo o último elemento

, que neste caso não possui a classe .visible. Conseqüentemente, nenhum dos seus elementos

está visível.

Solução

Para direcionar o último elemento

com a classe .visible, você deve usar JavaScript, pois não há seletor CSS integrado para essa finalidade específica.