Usando o seletor de último filho

Meu objective é aplicar o CSS no último li , mas isso não acontece.

Como posso selecionar apenas o último filho?

A pseudoclass :last-child ainda não pode ser usada com segurança em todos os navegadores. Em particular, as versões do Internet Explorer <9 e o Safari <3.2 definitivamente não suportam , embora o Internet Explorer 7 e o Safari 3.2 suportem :first-child , curiosamente.

Sua melhor aposta é adicionar explicitamente uma last-child aula (ou similar) àquele item e aplicar li.last-child .

Outra solução que pode funcionar para você é reverter o relacionamento. Então você definiria a borda para todos os itens da lista. Você usaria o primeiro filho para eliminar a borda do primeiro item. O primeiro filho é estaticamente suportado em todos os navegadores (o que significa que não pode ser adicionado dinamicamente através de outro código, mas o primeiro filho é um seletor CSS2, enquanto o último filho foi adicionado na especificação CSS3)

Nota: Isso só funciona da maneira que você pretendia se você tivesse apenas dois itens na lista, como o seu exemplo. Qualquer item 3 e on terá bordas aplicadas a eles.

Se você acha que pode usar o Javascript, então desde o last-child jQuery do suporte do jQuery, você pode usar o método css do jQuery e a coisa boa que suportará quase todos os navegadores

Exemplo de código:

 $(function(){ $("#nav li:last-child").css("border-bottom","1px solid #b5b5b5") }) 

Você pode encontrar mais informações aqui: http://api.jquery.com/css/#css2

Se o número de itens da lista é fixo você pode usar o seletor adjacente, por exemplo, se você tem apenas três elementos

  • , você pode selecionar o último

  • com:

     #nav li+li+li { border-bottom: 1px solid #b5b5b5; } 

    Se você está freqüentemente querendo seletores CSS3, você sempre pode usar a biblioteca selectivizr em seu site:

    http://selectivizr.com/

    É um script JS que adiciona suporte a quase todos os seletores CSS3 a navegadores que, de outra forma, não os suportariam.

    Jogue na sua tag com um IE condicional:

      

    última pseudo class de filho não funciona no IE

    Compatibilidade CSS e Internet Explorer

    Seletores de CSS do IE7: como eles falham

    Como uma alternativa ao uso de uma class, você poderia usar uma lista detalhada, definindo os elementos filho dt para ter um estilo e os elementos filho dd para ter outro. Seu exemplo se tornaria:

     #refundReasonMenu #nav li:dd { border-bottom: 1px solid #b5b5b5; } 

    html:

      

    Nenhum dos dois methods é melhor que o outro e é apenas por preferência pessoal.

    Outra maneira de fazer isso é usar o seletor de último filho no jQuery e, em seguida, usar o método .css (). Seja cansado, porque algumas pessoas ainda estão na idade da pedra usando navegadores com JavaScript desabilitado.

    Por que não aplicar a borda ao fundo do UL?

     #refundReasonMenu #nav ul { border-bottom: 1px solid #b5b5b5; } 

    Se você está flutuando os elementos, você pode reverter o pedido

    ie float: right; em vez de float: left;

    E, em seguida, use esse método para selecionar o primeiro filho de uma class.

     /* 1: Apply style to ALL instances */ #header .some-class { padding-right: 0; } /* 2: Remove style from ALL instances except FIRST instance */ #header .some-class~.some-class { padding-right: 20px; } 

    Na verdade, isso está aplicando a class somente à instância LAST porque agora está em ordem inversa.

    Aqui está um exemplo prático para você:

     < !doctype html> CSS Test       

    É difícil dizer sem ver o resto do seu CSS, mas tente adicionar !important na frente da cor da borda, para fazê-lo da seguinte forma:

     #refundReasonMenu #nav li:last-child { border-bottom: 1px solid #b5b5b5 !important; }