Existe uma maneira de selecionar o último item de uma lista com CSS?

Question

Digamos que eu tenha uma lista como segue:

• item 1
• item2
• item3

Existe um seletor CSS que me permita selecionar diretamente o último item de uma lista?Neste caso, item 3.

Saúde!

Answer 1

Não que eu saiba.A solução tradicional é marcar o primeiro e o último item com class="first" & class="last" para que você possa identificá-los.

A pseudo-classe CSS primeiro filho você receberá o primeiro item, mas nem todos os navegadores o suportam.CSS3 terá último filho também (atualmente é compatível com Firefox, Safari, mas não com IE 6/7/beta 8)

Answer 2

Até que seja devidamente suportado, você precisará adicionar uma classe aos 'últimos' itens, conforme sugerido.Você não precisa fazer isso manualmente.Se você conseguir acertar o javascript, dê uma olhada em:

• o seletor jQuery:last-child
• Mantendo os filhos dos seus elementos alinhados com a prole (uma lista de artigos de Alex Bischoff), um método específico e mais leve

Qualquer um evitará 'poluir' sua marcação e será perfeitamente aceitável se seu estilo for uma 'adição agradável' em vez de um recurso de design 'obrigatório'.

Answer 3

A resposta para esta pergunta deve ser atualizada!IE9 + Firefox (por um tempo atrás) + Chrome, Safari, todos com suporte: last-of-type ou last-child