Os seletores complexos foram feitos para suprir necessidades muito específicas do layout. Por exemplo: imagine uma página de cadastro. Nessa 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. Se você gostaria apenas que os inputs de text ficassem desse tamanho, terá que marcar com um CLASS todos os inputs com seus respectivos tipos, por exemplo:
<form action="">
<fieldset>
<label>Nome: <input type="text" class="input-text" /></label>
<label><input type="checkbox" class="input-checkbox" /> Desejo receber newsletters</label>
</fieldset>
</form>Assim, você pode definir no 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 exceçã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.
Se você quer acompanhar essa pequena campanha, veja no Twitter o que nós podemos fazer sem o IE6. Siga o hash #semie6.
De 0 a 10, o quanto você recomendaria este artigo para um amigo?