Busca

Boas práticas de Desenvolvimento com Padrões Web


Seletores Complexos do CSS

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

11/03/2009 por Diego Eis
51 Comentários

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:

1
2
3
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:

1
2
3
4
5
6
<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 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.

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

Se você quer acompanhar essa pequena campanha, veja no Twitter o que nós podemos fazer sem o IE6. Siga o hash #semie6.

51 Comentários

Sua opinião:

Vamos elevar o nível de discussão. Exponha sua opinião, sua crítica.



RSS dos comentários deste post
URL para Trackback

51 Comentários

Jaqueline Benedicto 11/03/2009 às 10:35

Adorei o final da matéria!! Realmente é deprimente não poder aplicar tantas coisas magníficas que o CSS nos proposciona, pois muitos dos nossos clientes não atualizam o navegador!

[]‘soamazing

Wilson Júnior 11/03/2009 às 10:41

Isso é algo que eu desconhecia no CSS.

Novamente o Tableless enriquece meu conhecimento.

Sucesso!

Leonardo 11/03/2009 às 10:58

Desconhecia isso no CSS.

Já havia tentado fazer esse tipo de referência no CSS antes, de alguma outras maneiras, nenhuma correta.
Adorei o artigo, e estarei acompanhando ele de perto.

Mtu bom msm.

Thiago Pereira 11/03/2009 às 11:05

Muito bom!
Eu não conhecia esses seletores complexos. Com certeza irá ajudar muito.

Nino Giovanny 11/03/2009 às 11:26

Muito bom o artigo, parabéns. CSS POWER! =D

Daniel Lobão 11/03/2009 às 11:41

Eu já conhecia os seletores, tanto aqui pelo Tableless quanto por outros blogs também. Mas nada melhor para refrescar a memória e aprender um pouco mais que um post do Diego.

Cleo Morgause 11/03/2009 às 11:47

O problema não somos nós (desenvolvedores) que usamos o IEka6 e sim os usuários…. mas já tem tantos outros elementos css que ele não aceita, que simplesmente ignoro. É mais fácil convencer o usuário que o navegador dele não tem segurança… e tem dado resultado isso xD

Chiquitto 11/03/2009 às 12:29

Na verdade eu ja os conhecia, mas não usava justamente porque muitos usuários ainda insistem em usar o [ironico]magnífico[/ironico] ie6.

Chris Benseler 11/03/2009 às 13:40

“Este artigo faz parte de uma série de textos técnicos sobre CSS, que ignora totalmente browsers antigos” -> clap clap!
Uma pena que aqui no meu trabalho, não dá pra fazer isso… muitos clientes de grande porte usam IE6 no seu parque de máquinas inteiro, e requerem (logicamente) validação total nesse browser :-/

Jackson 11/03/2009 às 13:46

Bacana! Eu já conhecia os seletores, mas utilizo mais via jQuery do que no próprio css, justamente por causa do bendito IE6.

Mas é questão de tempo. Logo, logo ele vai pro pau de vez.

Vamos acabar com o IE6, urgente!!! | Profissionais TI
http://www.profissionaisti.com.br/2009/01/vamos-acabar-com-o-ie6-urgente/

Abraço

Simão Neto 11/03/2009 às 14:32

Boa tarde, sem duvidas esses seletores de css são magnificos,poupa codigo demais na pagina e facil manutenção….

Tableless…toda…turma de parabéns, e morte ao ie6.

Thiago Cavalcanti 11/03/2009 às 14:47

Não sou fã do IE6 nem de outros browsers antigos, mas ainda tem muita gente que é(ou ao menos parece que é). E como Chris falou, infelizmente…

Izac 11/03/2009 às 15:03

Não sou fã do IE6, mas hoje em dia não há muita escapatória. Já conhecia esses seletores, mas como ainda não podemos usá-los 100%, ainda prefiro criar classes específicas e utilizá-las pelo CSS Browser Selector (http://github.com/rafaelp/css_browser_selector) ou fazer um CSS quem funcione 100% em todos os browsers, ou seja, eliminando alguns recursos :( .

Edy Segura 11/03/2009 às 15:05

O CSS tem muitas maravilhas que não podemos usar devido a massa ainda usar navegadores antigos.

Mário Araújo 11/03/2009 às 15:23

Segue o link da solução para utilizar esses seletores complexos no IE6:

http://elmicox.blogspot.com/2008/01/contornar-vrios-bugs-do-ie-numa-tacada.html

Fernando Souza (Fenna) 11/03/2009 às 15:55

Parabéns mais uma vez … tentei de várias formas fazer isso antes, e todas elas erradas … rss …. e ai vc mais uma vez me tira uma dúvida de maneira clara, objetiva e simples …
Por isso que não perco seus feeds por nada !!!

Valeu e parabéns !!!

Leonardo 11/03/2009 às 16:21

Então, a respeito do IE6, concordo com o Izac. Ainda não podemos usá-los 100%, porém existem casos e casos. Dependeno do trabalho creio que já é possível sim utilizar sem medo esses recursos.
Acho importante começar a usar em todos os lugares possíveis esses recursos do CSS3, pois bons trabalhos podem deixar de ser feitos por esse detalhe de navegadores não adaptados ainda.
Porém como eu disse, há casos e há casos. Sendo possível e viável, acho que é o que deve ser feito.

Marcio Toledo 11/03/2009 às 17:40

Uma outra dica boa é o seletor complexo para formulários, no qual você pode especificar quais inputs está formatando através do tipo de dados de entrada!
Ex:

form input[type="text"] {
propriedades;
}

form input[type="button"] {
proprieades;
}

:]

Flor Braz 11/03/2009 às 18:34

Diego, uma perguntinha, com aquele IE8.js oferecido pelo google code, eu vi que consigo usar o seletor ‘input[type="button"]‘ por exemplo, mas por acaso você já testou com esse script esses outros (lindíssimos :D ) seletores que você citou na sua matéria?

Só pra adiantar a bola, se você ainda não tiver testado vou fazer os testes.

Abraço,

Flor

Fernando Dutra - nandodutra 11/03/2009 às 18:46

Eu já conhecia a maioria desses seletores complexos, porém ainda não pude fazer uso plenos por ainda haver no mercado uma grande massa de usuários que usam o ie6, não sei se por falta de informação ou por acomodação.

Juarez P. A. Filho 11/03/2009 às 19:01

Será que depois dessa campanha eu vou poder usar esses seletores? Espero que o pessoal realmente comece a atualizar os navegadores.
Acredito que algumas pessoas ainda não conhecem esses seletores, por justamente a maioria dos desenvolvedores não utilizarem por conta do IE.
Vamos espalhar a campanha e ajudar a exterminar essa coisa. Eu comecei uma série de Screencasts lá no meu blog, tirando como base essa série aqui do Tableless, confiram em http://migre.me/7xh
Abraços Diego e pessoal.

Frank Gilber 11/03/2009 às 19:39

É isso ai Diego novamente outro ótimo assunto, que vai me ajudar e muito, valeu mesmo!:)

Diego Eis 11/03/2009 às 21:39

Ainda não testei Flora… Mas iria ser minha próxima tarefa… :D
Testa e fala para gente.

Matheus 12/03/2009 às 11:10

Que Maravilha!! Realmente poderemos fazer muito mais coisas!! E tomara que aqui não tenha nenhum fã do IEx…

hehe

Mário Araújo 12/03/2009 às 12:46

oi Flor Braz,

eu estou usando num projeto atual esse IE8.js e está funcionando perfeitamente com IE6 e IE7. Quando publicar o site passo o link pra galera da uma olhada.

Marcelo de Souza 12/03/2009 às 18:16

Uma profecia: O Internet Explorer 6 nunca deixará de existir.

Saulo Barbosa Oliveira 13/03/2009 às 00:32

Nossa! eu estava EXATAMENTE COM ESSE PEPINO DE FORMULARIO!!! aplicando! auehueah

Marvin Madson 13/03/2009 às 03:16

O melhor artigo!
Parabéns!

Fabrício Sahdo 13/03/2009 às 15:44

pra quem se matava pra estrutura form em tableless.. agora dá gosto de pegar um forma e montar tranquilamente!

boa matéria, parabens!

Thiago Web Design & Design Gráfico - CSS - Seletores Complexos 14/03/2009 às 01:24

[...] navegando no site do Tableless, encontrei este post, achei ele muito bom, pois aprendi algo novo, o Seletor Complexo, que é uma mandeira mais simples [...]

Flávio 16/03/2009 às 09:45

Muito Foda a postagem! Parabéns pelo blog, acompanho a pouco tempo e admiro a nova tendência open source de se ensinar td o que sabe, parabéns!

Diego Felix 17/03/2009 às 10:40

[.. Estou nivelando esse assunto por cima. Portanto, se você é fã do IE6 ou outro browser antigo qualquer, seu lugar não é aqui..]

Calma Diegão sehuiehauhaeiaeh….

Esses seletores complexos são novidade pra mim…

Paulo Fernandes 17/03/2009 às 11:43

A questão não é nem ser fã ou gostar do IE6…

é o que o cliente pede. Isso depende muito do publico alvo que usará o site

Diogo Costa 18/03/2009 às 13:56

Esse seletor é mto bom, eu ja conhecia, mas inevitavelmente eu tbm ja sabia que ele nao funciona em toda a familia IE, inclusive o 7, achei que o Diego fosse mensionar isso.

Dizem que o IE8 vai ajudar a vida dos programadores, pq até agora só fez merda. Um seletor desse extremamente útil infelizmente nao pode ser usado hoje em dia por conta da supremacia do IE e sua limitação. Eu ainda uso classes pra resolver isso, é foda.

Diego Felix 18/03/2009 às 20:31

[... Dizem que o IE8 vai ajudar a vida dos programadores ...]
Antes o problema fosse o Browser, de que adianta a Microsoft lançar um Browser 100%(impossível) se os usuários nem mesmo atualizaram o seus para o IE7?

Abraços.

Felipe Rodrigues 18/03/2009 às 21:14

Estava um pouco afastado dessa área e estou voltando agora. Fico feliz em saber que o Tableless continua com a mesma qualidade de antes.

DGmike 19/03/2009 às 16:06

Acabo de testar o IE8, que acabou de ser lançado hoje mesmo. Os selectores complexos passaram nos testes que eu fiz aqui. Parece que o pessoal tomou vergonha na cara e decidiu fazer um browser meio que decente… :D

[c3] 20/03/2009 às 11:44

Bom dia,
eu realmente adorei este post, não conhecia os seletores complexos e acho que são uma mão na roda, infelizmente não é algo que vou poder utilizar no meu trabalho pois aqui a regra é que precisa funcionar perfeitamente também no IEca6, mas mesmo assim penso utiliza-los nos meus projetos pessoais novos. Depois de ler o post, fui fazer alguns testes e percebi algo extranho… se eu utilizar estes seletores para um formulario, e por algum acaso precisar fazer com que um “input” seja diferente, eu teria que criar uma classe, certo? somente para este “input” e colocar ela depois dos estilos utilizados com o seletor complexo, para que a classe predomine por cima dos estilos anteriores, certo? no entanto fiz isto no meu teste e não aconteceu nada, fiz dois “input” um sem nenhuma classe e o outro com a classe especial, e somente se eu comentar os estilos dados com o seletor complexo é que o estilo colocado na classe aparece, será que estou fazendo alguma coisa errada?

Guilherme 21/03/2009 às 15:35

Pra quê seletores se já temos as bibliotecas de javascript? JQuery faz tudo Galera….. é a solução pros hacks dos I.Es. Sei que A MAIORIA do pessoal do design não gosta de programar, mas jquery é simples e fácil! Concordo que não é um W3C… mas funciona! Pra quem não conhece, acesse http://www.jquery.com (documentação em inglês)

Pseudo-classes do CSS | Tableless.com.br 23/03/2009 às 09:46

[...] essas possibilidades. É por isso toda essa campanha contra o Internet Explorer 6. Esse artigo e outros artigos fazem parte dessa campanha. É uma forma de mostrar o quanto perdemos de produtividade em [...]

Tomás 23/03/2009 às 17:22

Dica interessante. Só pesou um pouco a parte do IE6, como se fosse escolha nossa. Não faço questão de adaptar um site que faço para o IE6, mas imagine se disser isso para meu cliente?

Quanto ao JQuery, é sim uma alternativa, mas não acho boa prática fazer com que uma tecnologia faça o trabalho da outra. Tente fazer todo o estilo em JQuery e veja a performance do seu site ir para o buraco, da mesma forma com que já vi muitos desenvolvedores fazerem select * from tabela e filtrar os dados no código.

Abraços
Tomás

Pseudo-classes CSS 24/03/2009 às 11:53

[...] Seletores Complexos via Tableless [...]

Flávio Martins 27/03/2009 às 17:07

Excelente matéria. Inclusive, difícil (ou impossível…) o assunto ser chato e nada a ver por aqui e acho muito legal mesmo a participação de várias pessoas. Sempre vejo feedback vindo de várias partes do Brasil e isso é perfeito. Parabéns para toda a equipe!

Sergio Almeida 31/03/2009 às 11:41

Diego, não conhecia essa. Muito bom! Valeu por compartilhar!

Fabrício Godoy 31/03/2009 às 14:47

O correto é “exceção” e não “excessão”.

Pulga na cueca e experimentando HTML5 | Tableless.com.br 07/04/2009 às 15:56

[...] utilizei um bocado de seletores complexos e pseudo-classes que normalmente não funcionam no IE6. Utilizei também PNG e não coloquei um [...]

Tom Marques 20/04/2009 às 07:33

Não conhecia esse seletores também. Muito útil!

Quanto ao IE6, existe uma campanha chamada “IE6 update” onde você coloca um script na página, simulando uma notificação pra atualizar o browser. http://ie6update.com/

Maicon 25/04/2009 às 12:07

Olá, estes dias estava procurando algo como isso, não queria alterar o código HTML, e sempre pensando utilizar somente o CSS. Hoje encontrei uma forma excelente de fazer, bem aqui!!!!

:D

Adorei o post!!!

segurança na rede 23/12/2009 às 16:26

Boa dica para o Conhecimento pessoal

Não utilizo estes recursos, serão muito uteis na automação dos processos e manutenção de sites.
Vale a pena revisar o assunto.