Seletores complexos do CSS

por: Diego Eis

Seletores Complexos do CSS
Os seletores complexos mostram como a CSS pode ser dinâmica e direta.

Os seletores complexos foram feitos para suprir necessidades muito específicas do layout. Por exemplo: Imagine uma página de cadastro, essa página há um formulário enorme, com campos de todos os tipos: radio, checkbox, text, submit etc…
Você precisa por exemplo, definir uma largura para os campos de texto, você não poderá colocar a linha como a de baixo:

input {
width: 200px;
}

Com essa linha você fará com que todos os inputs fiquem com largura de 200px, inclusive os inputs de radio, checkbox, submit, image, etc.. Você gostaria apenas que os inputs de text, ficassem desse tamanho.
Logo, você terá marcar com um CLASS todos os inputs com seus respectivos tipos, por exemplo:

Nome:
Desejo receber newsletters

Assim você pode definir na CSS cada elemento pela sua classe. Acontece que você está colocando um atributo a mais, fazendo com que o código fique maior. Esse layout pode já estar publicado, e pode ser complicado modificar diretamente o HTML por conta do código server-side. Por isso, pelo CSS, podemos utilizar os seletores complexos para manipular elementos específicos sem a necessidade de modificar o HTML diretamente.

No caso acima, usaríamos o seguinte código para selecionar apenas os elementos de input de texto.

input[type="text"] {
width: 200px;
}

Perceba que no seletor há o objeto que você quer modificar: o INPUT. Mas não são todos os inputs. Entre os colchetes especificamos a excessão. No exemplo acima, selecionamos os inputs com o atributo TYPE com o valor TEXT.
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:
Seletor Descriçã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://tableless.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~="tableless"] 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 “tableless” no meio.

Este artigo faz parte de uma série de textos técnicos sobre CSS, que ignora totalmente browsers antigos. Estou nivelando esse assunto por cima. Portanto, se você é fã do IE6 ou outro browser antigo qualquer, seu lugar não é aqui.

fonte: http://www.tableless.com.br