Seletores complexos do css

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