Selecionar o penúltimo elemento com CSS

Moleza. A situação era um grid onde as ultimas células continham uns botões. Como eu não posso mudar o componente que gera ou ia ficar muito caro para a equipe pra fazer isso, despadronizar com o fornecedor (se fosse atualizar, perderíamos o trabalho) etc, resolvemos via CSS mesmo.

Tem os seletores de CSS que pegam os filhos e são enumerados, existem também os que contam de trás para a frente, como o “:nth-last-of-type(n)”. Onde ‘n’ é o número de elementos que voce anda de trás para a frente, então 2 é o penúltimo elemento.

Para tirar a borda da tabela nas duas ultimas posições fiz assim:

.rgRow td:last-of-type , .rgAltRow td:last-of-type , 
.rgHeader:last-of-type ,
.rgRow td:nth-last-of-type(2) , .rgAltRow td:nth-last-of-type(2) , 
.rgHeader:nth-last-of-type(2) 
{
 border-right:0px solid #CCC !important;
 }

Referências
http://www.w3schools.com/cssref/sel_nth-last-of-type.asp
http://reference.sitepoint.com/css/pseudoclass-nthlastoftype

http://www.maujor.com/tutorial/seletores-css3.php

3 respostas em “Selecionar o penúltimo elemento com CSS

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s