Meu objetivo é aplicar o CSS no último li, mas não faz isso.
#refundReasonMenu #nav li:last-child {
border-bottom: 1px solid #b5b5b5;
}<div id="refundReasonMenu">
<ul id="nav">
<li><a id="abc" href="#">abcde</a></li>
<li><a id="def" href="#">xyz</a></li>
</ul>
</div>Como posso selecionar apenas o último filho?
Respostas:
A :last-childpseudoclasse ainda não pode ser usada de forma confiável em todos os navegadores. Em particular, as versões do Internet Explorer <9 e Safari <3,2 definitivamente não apoiá-lo , embora o Internet Explorer 7 e Safari 3.2 fazer apoio:first-child , curiosamente.
Sua melhor aposta é adicionar explicitamente uma last-childclasse (ou similar) a esse item e aplicar em seu li.last-childlugar.
:last-child .
Outra solução que pode funcionar para você é reverter o relacionamento. Portanto, você definiria a borda para todos os itens da lista. Em seguida, você usaria o primeiro filho para eliminar a borda do primeiro item. O primeiro filho é estaticamente compatível com todos os navegadores (o que significa que não pode ser adicionado dinamicamente por meio 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 desejada se você tiver apenas 2 itens na lista como o seu exemplo. Qualquer terceiro item em diante terá bordas aplicadas a eles.
Se você acha que pode usar Javascript, então, desde o suporte jQuery last-child, você pode usar o método css do jQuery e, a boa coisa, ele suportará quase todos os navegadores
Código de exemplo:
$(function(){
$("#nav li:last-child").css("border-bottom","1px solid #b5b5b5")
})Você pode encontrar mais informações sobre aqui: http://api.jquery.com/css/#css2
$("#nav li:last-child").addClass('last-child')para manter seu estilo nas folhas de estilo.
div:last-childe div.last-child. Parece que ele considera a :last-childsintaxe inválida e qualquer classe com esse pseudo-seletor não será aplicada.
Se o número de itens da lista for fixo, você pode usar o seletor adjacente, por exemplo, se você tiver apenas três <li>elementos, você pode selecionar o último <li>com:
#nav li+li+li {
border-bottom: 1px solid #b5b5b5;
}li + #nav liseleciona lidentro #navque vem depois li. Seu seletor deve simplesmente ser #nav li + li + li.
Se você costuma desejar seletores CSS3, poderá usar a biblioteca selectivizr em seu site:
É um script JS que adiciona suporte para quase todos os seletores CSS3 para navegadores que de outra forma não os suportariam.
Jogue-o em sua <head>tag com uma condicional do IE:
<!--[if (gte IE 6)&(lte IE 8)]>
<script src="/js/selectivizr-min.js" type="text/javascript"></script>
<![endif]-->pseudo classe do último filho não funciona no IE
Como alternativa ao uso de uma classe, você pode usar uma lista detalhada, definindo os elementos filho dt para ter um estilo e os elementos filhos dd para ter outro. Seu exemplo seria:
#refundReasonMenu #nav li:dd
{
border-bottom: 1px solid #b5b5b5;
}html:
<div id="refundReasonMenu">
<dl id="nav">
<dt><a id="abc" href="#">abcde</a></dt>
<dd><a id="def" href="#">xyz</a></dd>
</dl>
</div>Nenhum método é melhor do que o outro e é apenas uma questão de preferência pessoal.
Por que não aplicar a borda na parte inferior do UL?
#refundReasonMenu #nav ul
{
border-bottom: 1px solid #b5b5b5;
}padding-bottomno <ul>elemento ou margin-bottomno último <li>elemento, ele não terá o posicionamento desejado logo abaixo do último <li>elemento. Caso contrário, esta é uma boa solução.
Se você estiver flutuando os elementos, você pode inverter a ordem
ou seja, em float: right;vez defloat: left;
E então use este método para selecionar o primeiro filho de uma classe.
/* 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 classe à ÚLTIMA instância apenas porque agora está na ordem reversa.
Aqui está um exemplo prático para você:
<!doctype html>
<head><title>CSS Test</title>
<style type="text/css">
.some-class { margin: 0; padding: 0 20px; list-style-type: square; }
.lfloat { float: left; display: block; }
.rfloat { float: right; display: block; }
/* apply style to last instance only */
#header .some-class {
border: 1px solid red;
padding-right: 0;
}
#header .some-class~.some-class {
border: 0;
padding-right: 20px;
}
</style>
</head>
<body>
<div id="header">
<img src="some_image" title="Logo" class="lfloat no-border"/>
<ul class="some-class rfloat">
<li>List 1-1</li>
<li>List 1-2</li>
<li>List 1-3</li>
</ul>
<ul class="some-class rfloat">
<li>List 2-1</li>
<li>List 2-2</li>
<li>List 2-3</li>
</ul>
<ul class="some-class rfloat">
<li>List 3-1</li>
<li>List 3-2</li>
<li>List 3-3</li>
</ul>
<img src="some_other_img" title="Icon" class="rfloat no-border"/>
</div>
</body>
</html>
:last-child. E não é que curioso.:first-childé uma pseudoclasse CSS2,:last-childuma pseudoclasse CSS3.