CSS: Como selecionar um elemento sem id ou classe

A sintaxe do CSS está cada vez mais legal e se parecendo com uma linguagem de programação, dá pra fazer mágica! Parece que nunca vamos precisar destas coisas mas sempre aparece um caso em que rola.

A minha situação era a seguinte: mudar a propriedade de um <label> que era desenhado após um radiobutton. Eu poderia pedir ao programador para mudar o componente, mas isso ia requerer um bom tempo e de uma mão de obra cara. Por que não resolver com o CSS somente? Poderia ser que o componente não pudesse ser alterado ou viesse de algum serviço fora de nosso controle. Projeto grande é assim…

Então, como eu não podia simplesmente colocar um id ou uma class, defini que sempre que um label vier após um radiobutton, suas propriedades serão alteradas. Para isso, usei o ~ (til), ele pega o elemento especificado imediatamente após o elemento escrito primeiro. Aqui um exemplo:

input[type=radio] ~ label 
{
 float:none;
 font-weight:normal;
 margin-left:5px;
 padding:0px;
 }

Desta maneira, pode ter até alguma coisa entre eles que funciona. Veja mais coisas legais na referência aqui abaixo.

Referência:
http://www.w3.org/TR/css3-selectors/#adjacent-sibling-combinators

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s