Eustáquio Rangel

Desenvolvedor, pai, metalhead, ciclista

Seletores de atributos CSS

Publicado em GNU/Linux


Estava eu aqui redesenhando um site quando resolvi usar uma coisa que é uma mão na roda, que achei lendo o site do W3C: CSS attributes selectors
Deêm uma olhada nessa página aqui (não coloquei as coisas aqui pelo formato que o blog assume, não ia ficar legal renderizado sem os estilos). Reparem no código que gerou o campo texto e o botão:

<input type="text" size="20"/><br/>
<input type="submit" value="Submit me!"/>

Onde onde vieram as cores? Simples, logo acima tem uma tag style com os estilos definidos, usando seletores de atributos CSS:

<style>
input[type="text"] {
border:1px solid #137BF9;
background:#EEE;
color:black;
}

input[type="submit"] {
border:1px solid #0000D0;
background:#137BF9;
color:#FFF;
font:bold 12px "verdana","arial",sans-serif;
margin:5px;
}

input[type="submit"]:hover {
background-color:#00FF00;
color:black;
border-color:#00C000;
}
</style>

Mais claro que isso impossível. No exemplo logo acima do hover, tem uma regrinha que diz "para cada elemento input que type for submit, aplique o estilo entre as chaves". Isso é uma mão na roda, por que cada vez que você pode definir o estilo de seus elementos básicos sem usar uma tag class e ... espera um pouco.
Adivinhem qual browser não reconhece os seletores de atributos. Isso. Esse mesmo. :-(
Então ou você não dá bola para o Internet Exploder ou lá vamos nós usar class de novo em todos os inputs ... rídiculo isso. E depois falam que fica "mais fácil" fazer sites "para o IE" ... :-p

P.S.: Atualizei isso em 28/09/2005 para deixar o CSS mais bonitinho. Eu estava usando border-width, border-color arrrrggghhh ... :-)




Comentários

Comentários fechados.

Artigos anteriores