Pseudo classes first-child e last-child servem para aplicar css no primeiro ou último Ãtem de uma seletor CSS.
É muito bom usar pra colocar cantos arredondados.
Normalmente as pessoas colocam :
<ul> <li class="primeiro"></li> <li></li> <li></li> <li></li> <li></li> <li class="ultimo"></li> </ul>
E depois aplicam css no li.primeiro e no li.ultimo, e quem tem que programar depois server side no server que se vire fazendo ifs.
Isso não é necessário!
Veja no exemplo de First Child, como colocar uma cor diferente no primeiro Ãtem do menu.
HTML :
<ul> <li>Programas Relacionados</li> <li>Comentários (4)</li> <li>Espalhe este Post</li> </ul>
CSS :
#tabs ul li{ /* font padrão - preto */ font-color: #000; /* IE - CSS Condicional */ font-color: expression(this.previousSibling == null ? '#F00' : '#000'); } /* Pra todos os outros browsers é mais simples, é só usar o pseudo-classe :first-child */ #tabs ul li:first-child{ font-color: #f00; }
Funciona como um operador ternário normal :
Propriedade css : expression(condição ? valor verdadeiro : valor falso )
E se tivesse que escolher o último Ãtem?
Veja no exemplo, como colocar uma borda somente no último Ãtem:
#tabs ul li{ border: 0; border: expression(this.nextSibling == null ? '1px solid #000' : '0'); } #tabs ul li:last-child{ border: 0; }
Pingback: Min-Height e Max-Height para IE usando css condicional | TidBits
Pingback: Você não precisa de css hacks | TidBits
Aplicação:
.tabela tr td{
/* font padrão – preto */
color: #000;
/* IE – CSS Condicional */
color: expression(this.previousSibling == null ? ‘#ff0000’ : ‘#000’);
}
/*
Pra todos os outros browsers é mais simples,
é só usar o pseudo-classe :first-child
*/
.tabela tr td:first-child{ color: #f00; }
Nome
André
Descrição
Teste
Nota
10
Show de bola sua dica!!!! Muito boa e valeu mesmo!