Seletores complexos do css

[kobutiii 0]

Sei que o conteúdo do site Tableless é de acesso público, aliás, eu nem sei se é proibido linkar outros sites aqui, mas a informação é pertinente e relevante por isso eu resolvi postar.

 

Esta informação é para aqueles que, como eu, estão inciando em desenvolvimento.

 

 

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:

 

<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.

 

input[type=text] {

width: 200px;

}...

 

A matéria continua, porém pela formatação do fórum não pude colocá-la toda...

 

Artigo na íntegra: http://www.tableless.com.br/seletores-comp...o-css#more-1240

[Aprendiz CSS 3]

não vi a matéria na integra...

 

eu já usei esta forma, e não gostei muito pois não funciona no IE6...

 

a melhor coisa na minha opinião são as classes, você tem mais liberdade

 

pois imagine que você tenha dois inputs text que devam ser difetentes?

 

como você faria?

 

abraço

[kobutiii 0]

Esta é a parte final da matéria...

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.

Amigo, existem casos e casos entende? Na maioria das vezes você precisa diferentes formatações para diferentes campos, mas se houver algum dia onde você tenha um questionário de 300 forms e váááários radio buttons?

você vai ir 1 por 1? Isso é só mais uma das mil formas que você tem de tratar, intuito deste tópic na realidade foi mostrar uma alternativa, não impor nada....

[William Bruno 1501]

A discussão é bacana.

Mas infelizmente, não estamos desenvolvendo para browsers antigos porque queremos, mas somos obrigados.

O autor me cutuca ao dizer "se você é fãn do IE6".. simplesmente não tenho opção.

 

Uma forma que costumo usar, por exemplo.. se precisar formatar um grupo de radio buttons: eu crio um fieldset diferenciado para eles.

Já que é impossível acessá-los diretamente com as regras CSS mais complexas, no IE6..

 

O tópico é bom. E proponho que continuemos ele, apresentando formas crossbrowser para esse problema dos formulários em específico.

Como seria o jQuery... em que podemos usar muitos seletores não suportados no CSS direto, mas a API, faz o papel de traduzir para o IE6..