sábado, 14 de março de 2009

Trabalhando com seletores complexos no css

O CSS atual nos permite fazer seleções complexas como selecionar apenas os inputs do tipo texto. Os seletores complexos são feitos através da definição do objeto com sua excessão entre parenteses.

objeto[excessão] {propriedades}

O único problema é a falta de suporte por browsers antigos como o IE6.

Entre os colchetes você pode colocar uma série de sentenças que podem selecionar elementos bem específicos na tela. Aqui vão alguns exemplos:


SeletorDescrição
input[type="text"]Seleciona o elemento INPUT com o atributo TYPE cujo valor seja TEXT
a[href$=html]Seleciona elementos com atributos cujo seu valor temine com… Por exemplo, você poderia querer selecionar todos os links que apotam para um arquivo .pdf, ou .php etc.
a[href^="http://meusite.com.br/"]Seleciona elementos com o atributos que comecem com… Você pode querer selecionar apenas os links que apontem para um site específico, por exemplo.
a[title~="banana"]Seleciona os elementos cujo o atributo tenha um valor que seja separado por espaços. No exemplo acima ele seleciona um link que contenha o atributo title e que em seu valor tenha a palavra “banana” no meio.

Recomendo a leitura também deste link: Abreviando declarações e valores em Regras CSS

Nenhum comentário:

Postar um comentário