Pseudo classes first-child e last-child cross browser usando css condicional

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.

first-child e last-child cross browser usando css condificional

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; }

bookmark bookmark bookmark bookmark bookmark bookmark bookmark

Você pode se interessar também por:

Postado por Danilo em CSS | 3 Respostas »

3 Responses to “Pseudo classes first-child e last-child cross browser usando css condicional”

  1. 1
    Min-Height e Max-Height para IE usando css condicional | TidBits Says:
    October 15th, 2008 at 6:11 pm

    [...] com o exemplo de :first-child e :last-child, para usar min-height e max-height é necessário css [...]

  2. 2
    Você não precisa de css hacks | TidBits Says:
    November 12th, 2008 at 9:03 am

    [...] o suporte a imagens alpha ( pgn24 ) tão usado pelos designers hoje em dia e os pseudo seletores :first-child e :last-child. Essas 3 opções, somente essas 3 não tem jeito mesmo, é colocar expression no seu css e filter [...]

  3. 3
    André Rueda Says:
    February 13th, 2010 at 3:57 pm

    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

Leave a Reply