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

4 thoughts on “Pseudo classes first-child e last-child cross browser usando css condicional

  1. Pingback: Min-Height e Max-Height para IE usando css condicional | TidBits

  2. Pingback: Você não precisa de css hacks | TidBits

  3. 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

Your email address will not be published. Required fields are marked *